@vygruppen/spor-react 9.15.0 → 10.0.0

package/dist/{chunk-NTYAUO4O.mjs → chunk-FQLXMFMW.mjs}

@@ -3,8 +3,8 @@ import * as tokens11 from '@vygruppen/spor-design-tokens';
 export { tokens11 as tokens };
 import { forwardRef, Divider as Divider$1, Stack as Stack$1, Box, useMultiStyleConfig, chakra, Flex, Checkbox as Checkbox$1, useCheckbox, FormControl as FormControl$1, FormLabel as FormLabel$1, useFormControlContext, InputGroup, InputLeftElement, Input as Input$1, InputRightElement, Select, useDisclosure, Button, useControllableState, Radio as Radio$1, RadioGroup as RadioGroup$1, IconButton as IconButton$1, Switch as Switch$1, Textarea as Textarea$1, useStyleConfig, Accordion as Accordion$1, Skeleton as Skeleton$1, useButtonGroup, Center, ButtonGroup as ButtonGroup$1, Badge as Badge$1, Code as Code$1, Text, PopoverAnchor, PopoverContent, PopoverArrow, PopoverBody, FocusLock, Popover as Popover$1, PopoverTrigger, Portal, Link, ModalHeader as ModalHeader$1, useModalContext, DrawerContent as DrawerContent$1, Tabs as Tabs$1, Table as Table$1, defineStyleConfig as defineStyleConfig$1, createMultiStyleConfigHelpers as createMultiStyleConfigHelpers$1, Heading, CheckboxGroup as CheckboxGroup$1, List, ListItem, useColorModeValue, useFormControlProps, useFormControl, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, useColorMode, SkeletonCircle as SkeletonCircle$1, SkeletonText as SkeletonText$1, Breadcrumb as Breadcrumb$1, BreadcrumbItem as BreadcrumbItem$1, BreadcrumbLink as BreadcrumbLink$1, Drawer as Drawer$1, DrawerOverlay, DrawerBody, DrawerHeader, useMediaQuery, DrawerCloseButton, DarkMode, PopoverCloseButton, usePopoverContext, UnorderedList, ChakraProvider, useToast as useToast$1, useInterval } from '@chakra-ui/react';
 export { AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Box, Center, Collapse, Container, DarkMode, DrawerBody, DrawerCloseButton, DrawerFooter, DrawerOverlay, Fade, Flex, FormHelperText, Grid, GridItem, HStack, Image, Img, InputGroup, LightMode, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalOverlay, OrderedList, Portal, ScaleFade, SimpleGrid, Slide, SlideFade, Spacer, Tab, TabList, TabPanel, TabPanels, TableCaption, Tbody, Td, Tfoot, Th, Thead, Tr, UnorderedList, VStack, Wrap, WrapItem, defineStyleConfig, extendTheme, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToken } from '@chakra-ui/react';
-import * as React86 from 'react';
-import React86__default, { forwardRef as forwardRef$1, useRef, useState, useEffect, useId, Suspense, useContext, createContext, useCallback, useMemo, useLayoutEffect } from 'react';
+import * as React84 from 'react';
+import React84__default, { forwardRef as forwardRef$1, useRef, useState, useEffect, useId, Suspense, useContext, createContext, useCallback, useMemo, useLayoutEffect } from 'react';
 import { CloseOutline24Icon, SearchOutline24Icon, CloseFill30Icon, CloseFill24Icon, CloseFill18Icon, CalendarOutline24Icon, InformationFill24Icon, InformationFill18Icon, WarningFill24Icon, WarningFill18Icon, ErrorFill24Icon, ErrorFill18Icon, LinkOutOutline24Icon, DropdownDownFill18Icon, DropdownDownFill24Icon, DropdownUpFill24Icon, DropdownRightFill18Icon, DropdownLeftFill18Icon, Forward15MediaControllerFill30Icon, Backward15MediaControllerFill30Icon, PauseMediaControllerFill24Icon, PlayMediaControllerFill24Icon, NextMediaControllerFill30Icon, PreviousMediaControllerFill30Icon, ArrowLeftFill24Icon, ArrowLeftFill30Icon, ArrowRightFill18Icon, ArrowLeftOutline24Icon, ArrowRightOutline24Icon, ErrorOutline24Icon, AltTransportOutline24Icon, WarningOutline24Icon, SuccessOutline24Icon, InformationOutline24Icon, TrainFill18Icon, TrainFill24Icon, TrainFill30Icon, ExpressBusFill18Icon, ExpressBusFill24Icon, ExpressBusFill30Icon, BusFill18Icon, BusFill24Icon, BusFill30Icon, FerryFill18Icon, FerryFill24Icon, FerryFill30Icon, SubwayFill18Icon, SubwayFill24Icon, SubwayFill30Icon, TramFill18Icon, TramFill24Icon, TramFill30Icon, AltTransportFill18Icon, AltTransportFill24Icon, AltTransportFill30Icon, WalkFill18Icon, WalkFill24Icon, WalkFill30Icon } from '@vygruppen/spor-icon-react';
 import { usePopover, DismissButton, Overlay, useOverlayTrigger, useButton, useDateSegment, useDateField, useDatePicker, I18nProvider, useDialog, useFilter, useComboBox, useListBox, useOption, useListBoxSection, useSelect, HiddenSelect, useProgressBar, useCalendar, useDateRangePicker, useCalendarGrid, useRangeCalendar, useTimeField, useCalendarCell } from 'react-aria';
 import { useOverlayTriggerState, Item, useDateFieldState, useDatePickerState, useComboBoxState, useSelectState, useCalendarState, useDateRangePickerState, useTimeFieldState, useRangeCalendarState } from 'react-stately';
@@ -771,11 +771,11 @@ var require_lodash = __commonJS({
   }
 });
 var Divider = forwardRef((props, ref) => {
-  return /* @__PURE__ */ React86__default.createElement(Divider$1, { ...props, ref });
+  return /* @__PURE__ */ React84__default.createElement(Divider$1, { ...props, ref });
 });
 var Stack = forwardRef(
   ({ flexDirection, ...props }, ref) => {
-    return /* @__PURE__ */ React86__default.createElement(Stack$1, { ...props, direction: flexDirection, ref });
+    return /* @__PURE__ */ React84__default.createElement(Stack$1, { ...props, direction: flexDirection, ref });
   }
 );
 var AttachedInputs = ({
@@ -807,7 +807,7 @@ var AttachedInputs = ({
     }
   };
   const direction2 = flexDirection === "row" ? "horizontal" : "vertical";
-  return /* @__PURE__ */ React86__default.createElement(
+  return /* @__PURE__ */ React84__default.createElement(
     Flex,
     {
       role: "group",
@@ -821,7 +821,7 @@ var AttachedInputs = ({
 var Dialog = ({ title, children, ...props }) => {
   const ref = useRef(null);
   const { dialogProps, titleProps } = useDialog(props, ref);
-  return /* @__PURE__ */ React86__default.createElement(Box, { ...dialogProps, ref, outline: "none" }, title && /* @__PURE__ */ React86__default.createElement(Heading, { as: "h3", ...titleProps }, title), children);
+  return /* @__PURE__ */ React84__default.createElement(Box, { ...dialogProps, ref, outline: "none" }, title && /* @__PURE__ */ React84__default.createElement(Heading, { as: "h3", ...titleProps }, title), children);
 };
 var Popover = forwardRef$1(
   ({
@@ -852,21 +852,21 @@ var Popover = forwardRef$1(
       },
       state2
     );
-    const popoverBox = /* @__PURE__ */ React86__default.createElement(
+    const popoverBox = /* @__PURE__ */ React84__default.createElement(
       Box,
       {
         ...popoverProps,
         ref: popoverRef,
         minWidth: ((_a6 = triggerRef.current) == null ? void 0 : _a6.clientWidth) ?? "auto"
       },
-      /* @__PURE__ */ React86__default.createElement(DismissButton, { onDismiss: state2.close }),
+      /* @__PURE__ */ React84__default.createElement(DismissButton, { onDismiss: state2.close }),
       children,
-      /* @__PURE__ */ React86__default.createElement(DismissButton, { onDismiss: state2.close })
+      /* @__PURE__ */ React84__default.createElement(DismissButton, { onDismiss: state2.close })
     );
     if (isNonModal) {
       return popoverBox;
     }
-    return /* @__PURE__ */ React86__default.createElement(Overlay, null, hasBackdrop && /* @__PURE__ */ React86__default.createElement(Box, { ...underlayProps, position: "fixed", inset: "0" }), popoverBox);
+    return /* @__PURE__ */ React84__default.createElement(Overlay, null, hasBackdrop && /* @__PURE__ */ React84__default.createElement(Box, { ...underlayProps, position: "fixed", inset: "0" }), popoverBox);
   }
 );
 
@@ -907,7 +907,7 @@ var CardSelect = forwardRef(
     });
     useForceRerender(state2.isOpen);
     const ChevronIcon = size2 === "sm" ? DropdownDownFill18Icon : DropdownDownFill24Icon;
-    return /* @__PURE__ */ React86__default.createElement(Box, { ...props }, /* @__PURE__ */ React86__default.createElement(
+    return /* @__PURE__ */ React84__default.createElement(Box, { ...props }, /* @__PURE__ */ React84__default.createElement(
       chakra.button,
       {
         type: "button",
@@ -919,13 +919,13 @@ var CardSelect = forwardRef(
         width,
         "data-attachable": true
       },
-      /* @__PURE__ */ React86__default.createElement(Flex, { gap: 1.5, alignItems: "center" }, icon, /* @__PURE__ */ React86__default.createElement(Box, { as: "span", display: props["aria-label"] ? "none" : "inline" }, label), withChevron ? /* @__PURE__ */ React86__default.createElement(
+      /* @__PURE__ */ React84__default.createElement(Flex, { gap: 1.5, alignItems: "center" }, icon, /* @__PURE__ */ React84__default.createElement(Box, { as: "span", display: props["aria-label"] ? "none" : "inline" }, label), withChevron ? /* @__PURE__ */ React84__default.createElement(
         ChevronIcon,
         {
           transform: state2.isOpen ? "rotate(180deg)" : "none"
         }
       ) : null)
-    ), state2.isOpen && /* @__PURE__ */ React86__default.createElement(
+    ), state2.isOpen && /* @__PURE__ */ React84__default.createElement(
       Popover,
       {
         state: state2,
@@ -934,7 +934,7 @@ var CardSelect = forwardRef(
         crossOffset,
         placement
       },
-      /* @__PURE__ */ React86__default.createElement(
+      /* @__PURE__ */ React84__default.createElement(
         StaticCard,
         {
           colorScheme: "white",
@@ -944,7 +944,7 @@ var CardSelect = forwardRef(
           sx: styles3.card,
           ...overlayProps
         },
-        /* @__PURE__ */ React86__default.createElement(Dialog, { "aria-label": label }, children)
+        /* @__PURE__ */ React84__default.createElement(Dialog, { "aria-label": label }, children)
       )
     ));
   }
@@ -958,67 +958,77 @@ function useForceRerender(shouldRerender) {
   }, [shouldRerender]);
 }
 var Checkbox = forwardRef((props, ref) => {
-  return /* @__PURE__ */ React86__default.createElement(Checkbox$1, { ...props, ref });
+  return /* @__PURE__ */ React84__default.createElement(Checkbox$1, { ...props, ref });
 });
 var CheckboxGroup = ({
   direction: direction2 = "row",
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ React86__default.createElement(CheckboxGroup$1, { ...props }, /* @__PURE__ */ React86__default.createElement(Stack$1, { direction: direction2 }, children));
+  return /* @__PURE__ */ React84__default.createElement(CheckboxGroup$1, { ...props }, /* @__PURE__ */ React84__default.createElement(Stack$1, { direction: direction2 }, children));
 };
 
 // ../../node_modules/@chakra-ui/utils/dist/chunk-O3SWHQEE.mjs
 var dataAttr = (condition) => condition ? "" : void 0;
-var ChoiceChip = forwardRef((props, ref) => {
-  const {
+var ChoiceChip = forwardRef(
+  ({
     children,
     icon,
+    isChecked,
     isDisabled,
     size: size2 = "sm",
     chipType = "choice",
-    variant = "base"
-  } = props;
-  const {
-    state: state2,
-    getInputProps,
-    getCheckboxProps,
-    getRootProps,
-    getLabelProps
-  } = useCheckbox(props);
-  const styles3 = useMultiStyleConfig("ChoiceChip", {
-    size: size2,
-    chipType,
-    variant,
-    icon,
-    hasLabel: Boolean(children)
-  });
-  const id = `choice-chip-${useId()}`;
-  return /* @__PURE__ */ React86__default.createElement(
-    chakra.label,
-    {
-      htmlFor: id,
-      ...getRootProps(),
-      "aria-label": String(children)
-    },
-    /* @__PURE__ */ React86__default.createElement(chakra.input, { ...getInputProps({}, ref), id, disabled: isDisabled }),
-    /* @__PURE__ */ React86__default.createElement(
-      chakra.div,
+    variant = "base",
+    ...props
+  }, ref) => {
+    const {
+      state: state2,
+      getInputProps,
+      getCheckboxProps,
+      getRootProps,
+      getLabelProps
+    } = useCheckbox(props);
+    const styles3 = useMultiStyleConfig("ChoiceChip", {
+      size: size2,
+      chipType,
+      variant,
+      icon,
+      hasLabel: chipType !== "icon"
+    });
+    const id = `choice-chip-${useId()}`;
+    return /* @__PURE__ */ React84__default.createElement(
+      chakra.label,
       {
-        ...getLabelProps(),
-        __css: styles3.container,
-        "data-checked": dataAttr(state2.isChecked),
-        "data-hover": dataAttr(state2.isHovered),
-        "data-focus": dataAttr(state2.isFocused),
-        "data-active": dataAttr(state2.isActive),
-        "data-disabled": dataAttr(state2.isDisabled)
-      },
-      icon && /* @__PURE__ */ React86__default.createElement(chakra.span, { __css: styles3.icon }, state2.isChecked ? icon.checked : icon.default),
-      /* @__PURE__ */ React86__default.createElement(chakra.span, { __css: styles3.label, ...getCheckboxProps() }, chipType !== "icon" && children),
-      chipType === "filter" && state2.isChecked && /* @__PURE__ */ React86__default.createElement(CloseOutline24Icon, { marginLeft: 1.5 })
-    )
-  );
-});
+        htmlFor: id,
+        ...getRootProps(),
+        "aria-label": String(children)
+      },
+      /* @__PURE__ */ React84__default.createElement(
+        chakra.input,
+        {
+          ...getInputProps({}, ref),
+          id,
+          disabled: isDisabled
+        }
+      ),
+      /* @__PURE__ */ React84__default.createElement(
+        chakra.div,
+        {
+          ...getLabelProps(),
+          __css: styles3.container,
+          "data-checked": dataAttr(state2.isChecked),
+          "data-hover": dataAttr(state2.isHovered),
+          "data-focus": dataAttr(state2.isFocused),
+          "data-active": dataAttr(state2.isActive),
+          "data-disabled": dataAttr(state2.isDisabled)
+        },
+        icon && /* @__PURE__ */ React84__default.createElement(chakra.span, { __css: styles3.icon }, state2.isChecked ? icon.checked : icon.default),
+        chipType !== "icon" && /* @__PURE__ */ React84__default.createElement(chakra.span, { __css: styles3.label, ...getCheckboxProps() }, children),
+        chipType === "filter" && state2.isChecked && /* @__PURE__ */ React84__default.createElement(CloseOutline24Icon, { marginLeft: 1.5 })
+      )
+    );
+  }
+);
 function Combobox({
   label,
   isLoading,
@@ -1050,12 +1060,12 @@ function Combobox({
   const inputRef = externalInputRef ?? fallbackInputRef;
   const listBoxRef = useRef(null);
   const popoverRef = useRef(null);
+  const listboxId = `${useId()}-listbox`;
   const inputWidth = useInputWidth(inputRef);
   const state2 = useComboBoxState({
     allowsEmptyCollection: Boolean(emptyContent),
     defaultFilter: contains2,
     shouldCloseOnBlur: true,
-    label,
     ...rest
   });
   const comboBoxProps = {
@@ -1083,21 +1093,26 @@ function Combobox({
       ...rest,
       inputRef,
       listBoxRef,
-      popoverRef
+      popoverRef,
+      label
     },
     state2
   );
-  return /* @__PURE__ */ React86__default.createElement(React86__default.Fragment, null, /* @__PURE__ */ React86__default.createElement(
+  return /* @__PURE__ */ React84__default.createElement(React84__default.Fragment, null, /* @__PURE__ */ React84__default.createElement(
     Input,
     {
       ...styleProps(comboBoxProps),
       "aria-haspopup": "listbox",
       ref: inputRef,
+      role: "combobox",
       label,
+      "aria-expanded": state2.isOpen,
+      "aria-autocomplete": "list",
+      "aria-controls": listboxId,
       borderBottomLeftRadius: state2.isOpen && !isLoading ? 0 : borderBottomLeftRadius,
       borderBottomRightRadius: state2.isOpen && !isLoading ? 0 : borderBottomRightRadius,
       ...inputProps,
-      rightIcon: isLoading ? /* @__PURE__ */ React86__default.createElement(
+      rightIcon: isLoading ? /* @__PURE__ */ React84__default.createElement(
         ColorSpinner,
         {
           width: "1.5rem",
@@ -1112,7 +1127,7 @@ function Combobox({
         }
       ) : rightIcon
     }
-  ), state2.isOpen && !isLoading && /* @__PURE__ */ React86__default.createElement(
+  ), /* @__PURE__ */ React84__default.createElement("span", { "aria-hidden": "true", "data-trigger": "multiselect" }), state2.isOpen && !isLoading && /* @__PURE__ */ React84__default.createElement(
     Popover,
     {
       state: state2,
@@ -1124,11 +1139,12 @@ function Combobox({
       hasBackdrop: false,
       containerPadding: 0
     },
-    /* @__PURE__ */ React86__default.createElement(
+    /* @__PURE__ */ React84__default.createElement(
       ListBox,
       {
         ...listBoxProps,
         state: state2,
+        id: listboxId,
         listBoxRef,
         emptyContent,
         maxWidth: inputWidth
@@ -1166,7 +1182,7 @@ var debounce = (fn, ms = 100) => {
   };
 };
 var FormControl = forwardRef((props, ref) => {
-  return /* @__PURE__ */ React86__default.createElement(FormControl$1, { ...props, ref });
+  return /* @__PURE__ */ React84__default.createElement(FormControl$1, { ...props, ref });
 });
 var FormErrorMessage = ({
   children,
@@ -1182,7 +1198,7 @@ var FormErrorMessage = ({
     return null;
   }
   const { ref, ...errorMessageProps } = formControlContext.getErrorMessageProps();
-  return /* @__PURE__ */ React86__default.createElement(Box, { position: "relative", ref }, /* @__PURE__ */ React86__default.createElement(
+  return /* @__PURE__ */ React84__default.createElement(Box, { position: "relative", ref }, /* @__PURE__ */ React84__default.createElement(
     Box,
     {
       borderRadius: "xs",
@@ -1200,12 +1216,12 @@ var FormErrorMessage = ({
       ...errorMessageProps,
       ...boxProps
     },
-    /* @__PURE__ */ React86__default.createElement(Arrow, { position: "absolute", top: "-0.25em", left: "1em" }),
+    /* @__PURE__ */ React84__default.createElement(Arrow, { position: "absolute", top: "-0.25em", left: "1em" }),
     children
   ));
 };
 var Arrow = (props) => {
-  return /* @__PURE__ */ React86__default.createElement(
+  return /* @__PURE__ */ React84__default.createElement(
     Box,
     {
       ...props,
@@ -1216,7 +1232,7 @@ var Arrow = (props) => {
       fill: "none",
       transform: "rotate(45deg)"
     },
-    /* @__PURE__ */ React86__default.createElement(
+    /* @__PURE__ */ React84__default.createElement(
       Box,
       {
         as: "path",
@@ -1227,7 +1243,7 @@ var Arrow = (props) => {
   );
 };
 var FormLabel = forwardRef((props, ref) => {
-  return /* @__PURE__ */ React86__default.createElement(FormLabel$1, { ...props, ref });
+  return /* @__PURE__ */ React84__default.createElement(FormLabel$1, { ...props, ref });
 });
 function ListBox({
   isLoading,
@@ -1238,7 +1254,7 @@ function ListBox({
 }) {
   const { listBoxProps } = useListBox(props, state2, listBoxRef);
   const styles3 = useMultiStyleConfig("ListBox", {});
-  return /* @__PURE__ */ React86__default.createElement(
+  return /* @__PURE__ */ React84__default.createElement(
     List,
     {
       ...listBoxProps,
@@ -1249,19 +1265,19 @@ function ListBox({
     },
     state2.collection.size === 0 && props.emptyContent,
     Array.from(state2.collection).map(
-      (item) => item.type === "section" ? /* @__PURE__ */ React86__default.createElement(ListBoxSection, { key: item.key, section: item, state: state2 }) : /* @__PURE__ */ React86__default.createElement(Option, { key: item.key, item, state: state2 })
+      (item) => item.type === "section" ? /* @__PURE__ */ React84__default.createElement(ListBoxSection, { key: item.key, section: item, state: state2 }) : /* @__PURE__ */ React84__default.createElement(Option, { key: item.key, item, state: state2 })
     )
   );
 }
 function ItemLabel({ children }) {
   let { labelProps } = useOptionContext();
   const styles3 = useMultiStyleConfig("ListBox", {});
-  return /* @__PURE__ */ React86__default.createElement(Box, { ...labelProps, sx: styles3.label }, children);
+  return /* @__PURE__ */ React84__default.createElement(Box, { ...labelProps, sx: styles3.label }, children);
 }
 function ItemDescription({ children }) {
   let { descriptionProps } = useOptionContext();
   const styles3 = useMultiStyleConfig("ListBox", {});
-  return /* @__PURE__ */ React86__default.createElement(Box, { ...descriptionProps, sx: styles3.description }, children);
+  return /* @__PURE__ */ React84__default.createElement(Box, { ...descriptionProps, sx: styles3.description }, children);
 }
 function Option({ item, state: state2 }) {
   const ref = useRef(null);
@@ -1269,6 +1285,7 @@ function Option({ item, state: state2 }) {
     optionProps,
     isSelected,
     isDisabled,
+    isFocusVisible,
     isFocused,
     labelProps,
     descriptionProps
@@ -1284,6 +1301,9 @@ function Option({ item, state: state2 }) {
   if (isFocused) {
     dataFields["data-focus"] = true;
   }
+  if (isFocusVisible) {
+    dataFields["data-focus-visible"] = true;
+  }
   useEffect(() => {
     var _a6;
     (_a6 = ref == null ? void 0 : ref.current) == null ? void 0 : _a6.addEventListener(
@@ -1294,9 +1314,9 @@ function Option({ item, state: state2 }) {
       { passive: false, once: true }
     );
   }, []);
-  return /* @__PURE__ */ React86__default.createElement(OptionContext.Provider, { value: { labelProps, descriptionProps } }, /* @__PURE__ */ React86__default.createElement(ListItem, { ...optionProps, ...dataFields, ref, sx: styles3.item }, item.rendered));
+  return /* @__PURE__ */ React84__default.createElement(OptionContext.Provider, { value: { labelProps, descriptionProps } }, /* @__PURE__ */ React84__default.createElement(ListItem, { ...optionProps, ...dataFields, ref, sx: styles3.item }, item.rendered));
 }
-var OptionContext = React86__default.createContext({
+var OptionContext = React84__default.createContext({
   labelProps: {},
   descriptionProps: {}
 });
@@ -1310,7 +1330,7 @@ function ListBoxSection({ section, state: state2 }) {
   });
   const isFirstSection = section.key === state2.collection.getFirstKey();
   const titleColor = useColorModeValue("darkGrey", "white");
-  return /* @__PURE__ */ React86__default.createElement(ListItem, { ...itemProps }, section.rendered && /* @__PURE__ */ React86__default.createElement(
+  return /* @__PURE__ */ React84__default.createElement(ListItem, { ...itemProps }, section.rendered && /* @__PURE__ */ React84__default.createElement(
     Box,
     {
       fontSize: "mobile.xs",
@@ -1323,8 +1343,8 @@ function ListBoxSection({ section, state: state2 }) {
       ...headingProps
     },
     section.rendered
-  ), /* @__PURE__ */ React86__default.createElement(List, { ...groupProps, padding: 0, listStyleType: "none" }, Array.from(state2.collection.getChildren(section.key)).map(
-    (item) => /* @__PURE__ */ React86__default.createElement(Option, { key: item.key, item, state: state2 })
+  ), /* @__PURE__ */ React84__default.createElement(List, { ...groupProps, padding: 0, listStyleType: "none" }, Array.from(state2.collection.getChildren(section.key)).map(
+    (item) => /* @__PURE__ */ React84__default.createElement(Option, { key: item.key, item, state: state2 })
   )));
 }
 
@@ -1363,7 +1383,7 @@ function InfoSelect({
   const { t: t2 } = useTranslation();
   const formControl = useFormControlProps(props);
   const hasChosenValue = state2.selectedItem !== null;
-  return /* @__PURE__ */ React86__default.createElement(Box, { sx: styles3.container }, /* @__PURE__ */ React86__default.createElement(
+  return /* @__PURE__ */ React84__default.createElement(Box, { sx: styles3.container }, /* @__PURE__ */ React84__default.createElement(
     HiddenSelect,
     {
       state: state2,
@@ -1371,7 +1391,7 @@ function InfoSelect({
       label: props.label,
       name: props.name
     }
-  ), /* @__PURE__ */ React86__default.createElement(
+  ), /* @__PURE__ */ React84__default.createElement(
     chakra.button,
     {
       type: "button",
@@ -1382,7 +1402,7 @@ function InfoSelect({
       "aria-invalid": formControl.isInvalid,
       "aria-describedby": formControl["aria-describedby"]
     },
-    /* @__PURE__ */ React86__default.createElement(chakra.div, { sx: styles3.innerButton }, /* @__PURE__ */ React86__default.createElement(
+    /* @__PURE__ */ React84__default.createElement(chakra.div, { sx: styles3.innerButton }, /* @__PURE__ */ React84__default.createElement(
       chakra.div,
       {
         ...labelProps,
@@ -1396,7 +1416,7 @@ function InfoSelect({
         }
       },
       props.label
-    ), /* @__PURE__ */ React86__default.createElement(
+    ), /* @__PURE__ */ React84__default.createElement(
       Box,
       {
         ...valueProps,
@@ -1408,15 +1428,15 @@ function InfoSelect({
       },
       state2.selectedItem ? state2.selectedItem.textValue ?? state2.selectedItem.rendered : placeholder ?? t2(texts.selectAnOption)
     )),
-    /* @__PURE__ */ React86__default.createElement(Box, { sx: styles3.arrowIcon }, state2.isOpen ? /* @__PURE__ */ React86__default.createElement(DropdownUpFill24Icon, null) : /* @__PURE__ */ React86__default.createElement(DropdownDownFill24Icon, null))
-  ), state2.isOpen && /* @__PURE__ */ React86__default.createElement(
+    /* @__PURE__ */ React84__default.createElement(Box, { sx: styles3.arrowIcon }, state2.isOpen ? /* @__PURE__ */ React84__default.createElement(DropdownUpFill24Icon, null) : /* @__PURE__ */ React84__default.createElement(DropdownDownFill24Icon, null))
+  ), state2.isOpen && /* @__PURE__ */ React84__default.createElement(
     Popover,
     {
       state: state2,
       triggerRef,
       containerPadding: 0
     },
-    /* @__PURE__ */ React86__default.createElement(
+    /* @__PURE__ */ React84__default.createElement(
       ListBox,
       {
         ...menuProps,
@@ -1441,7 +1461,8 @@ var Input = forwardRef(
     const formControlProps = useFormControlContext();
     const fallbackId = `input-${useId()}`;
     const inputId = id ?? (formControlProps == null ? void 0 : formControlProps.id) ?? fallbackId;
-    return /* @__PURE__ */ React86__default.createElement(InputGroup, { position: "relative" }, leftIcon && /* @__PURE__ */ React86__default.createElement(InputLeftElement, { pointerEvents: "none" }, leftIcon), /* @__PURE__ */ React86__default.createElement(
+    const labelId = `${useId()}-label`;
+    return /* @__PURE__ */ React84__default.createElement(InputGroup, { position: "relative" }, leftIcon && /* @__PURE__ */ React84__default.createElement(InputLeftElement, { pointerEvents: "none" }, leftIcon), /* @__PURE__ */ React84__default.createElement(
       Input$1,
       {
         "data-attachable": true,
@@ -1449,22 +1470,23 @@ var Input = forwardRef(
         paddingRight: rightIcon ? 7 : void 0,
         ...props,
         id: inputId,
+        "aria-labelledby": labelId,
         ref,
         placeholder: " "
       }
-    ), /* @__PURE__ */ React86__default.createElement(FormLabel$1, { htmlFor: inputId }, label), rightIcon && /* @__PURE__ */ React86__default.createElement(InputRightElement, { pointerEvents: "none" }, rightIcon));
+    ), /* @__PURE__ */ React84__default.createElement(FormLabel$1, { htmlFor: inputId, id: labelId }, label), rightIcon && /* @__PURE__ */ React84__default.createElement(InputRightElement, { pointerEvents: "none" }, rightIcon));
   }
 );
 var InputLeftElement2 = forwardRef(
-  (props, ref) => /* @__PURE__ */ React86__default.createElement(InputLeftElement, { ...props, ref })
+  (props, ref) => /* @__PURE__ */ React84__default.createElement(InputLeftElement, { ...props, ref })
 );
 var InputRightElement2 = forwardRef(
-  (props, ref) => /* @__PURE__ */ React86__default.createElement(InputRightElement, { ...props, ref })
+  (props, ref) => /* @__PURE__ */ React84__default.createElement(InputRightElement, { ...props, ref })
 );
 var NativeSelect = forwardRef(
   ({ label, ...props }, ref) => {
     const styles3 = useMultiStyleConfig("Select", props);
-    return /* @__PURE__ */ React86__default.createElement(FormControl, null, /* @__PURE__ */ React86__default.createElement(
+    return /* @__PURE__ */ React84__default.createElement(FormControl, null, /* @__PURE__ */ React84__default.createElement(
       Select,
       {
         "data-attachable": true,
@@ -1472,7 +1494,7 @@ var NativeSelect = forwardRef(
         rootProps: { __css: styles3.root },
         ref
       }
-    ), label && /* @__PURE__ */ React86__default.createElement(FormLabel, null, label));
+    ), label && /* @__PURE__ */ React84__default.createElement(FormLabel, null, label));
   }
 );
 function NumericStepper({
@@ -1498,17 +1520,17 @@ function NumericStepper({
   });
   const formControlProps = useFormControl({ id: idProp, isDisabled });
   const clampedStepSize = Math.max(Math.min(stepSize, 10), 1);
-  return /* @__PURE__ */ React86__default.createElement(Flex, { __css: styles3.container, ...boxProps }, /* @__PURE__ */ React86__default.createElement(
+  return /* @__PURE__ */ React84__default.createElement(Flex, { __css: styles3.container, ...boxProps }, /* @__PURE__ */ React84__default.createElement(
     VerySmallButton,
     {
-      icon: /* @__PURE__ */ React86__default.createElement(SubtractIcon, { stepLabel: clampedStepSize }),
+      icon: /* @__PURE__ */ React84__default.createElement(SubtractIcon, { stepLabel: clampedStepSize }),
       "aria-label": t2(texts2.decrementButtonAriaLabel(clampedStepSize)),
       onClick: () => onChange(Math.max(value - clampedStepSize, minValue)),
       visibility: value <= minValue ? "hidden" : "visible",
       isDisabled: formControlProps.disabled,
       id: value <= minValue ? void 0 : formControlProps.id
     }
-  ), withInput ? /* @__PURE__ */ React86__default.createElement(
+  ), withInput ? /* @__PURE__ */ React84__default.createElement(
     chakra.input,
     {
       type: "number",
@@ -1531,7 +1553,7 @@ function NumericStepper({
         onChange(Math.max(Math.min(numericInput, maxValue), minValue));
       }
     }
-  ) : /* @__PURE__ */ React86__default.createElement(
+  ) : /* @__PURE__ */ React84__default.createElement(
     chakra.text,
     {
       sx: styles3.text,
@@ -1539,10 +1561,10 @@ function NumericStepper({
       "aria-label": value.toString()
     },
     value
-  ), /* @__PURE__ */ React86__default.createElement(
+  ), /* @__PURE__ */ React84__default.createElement(
     VerySmallButton,
     {
-      icon: /* @__PURE__ */ React86__default.createElement(AddIcon, { stepLabel: clampedStepSize }),
+      icon: /* @__PURE__ */ React84__default.createElement(AddIcon, { stepLabel: clampedStepSize }),
       "aria-label": t2(texts2.incrementButtonAriaLabel(clampedStepSize)),
       onClick: () => onChange(Math.min(value + clampedStepSize, maxValue)),
       visibility: value >= maxValue ? "hidden" : "visible",
@@ -1553,9 +1575,9 @@ function NumericStepper({
 }
 var VerySmallButton = (props) => {
   const styles3 = useMultiStyleConfig("NumericStepper", {});
-  return /* @__PURE__ */ React86__default.createElement(IconButton, { variant: "primary", size: "xs", sx: styles3.button, ...props });
+  return /* @__PURE__ */ React84__default.createElement(IconButton, { variant: "primary", size: "xs", sx: styles3.button, ...props });
 };
-var SubtractIcon = (props) => /* @__PURE__ */ React86__default.createElement(React86__default.Fragment, null, /* @__PURE__ */ React86__default.createElement(
+var SubtractIcon = ({ stepLabel, ...props }) => /* @__PURE__ */ React84__default.createElement(React84__default.Fragment, null, /* @__PURE__ */ React84__default.createElement(
   Box,
   {
     as: "svg",
@@ -1565,7 +1587,7 @@ var SubtractIcon = (props) => /* @__PURE__ */ React86__default.createElement(Rea
     stroke: "currentColor",
     ...props
   },
-  /* @__PURE__ */ React86__default.createElement(
+  /* @__PURE__ */ React84__default.createElement(
     "line",
     {
       x1: "9",
@@ -1576,8 +1598,8 @@ var SubtractIcon = (props) => /* @__PURE__ */ React86__default.createElement(Rea
       strokeLinecap: "round"
     }
   )
-), props.stepLabel > 1 && /* @__PURE__ */ React86__default.createElement(chakra.span, { paddingRight: "1" }, props.stepLabel.toString()));
-var AddIcon = (props) => /* @__PURE__ */ React86__default.createElement(React86__default.Fragment, null, /* @__PURE__ */ React86__default.createElement(
+), stepLabel > 1 && /* @__PURE__ */ React84__default.createElement(chakra.span, { paddingRight: "1" }, stepLabel.toString()));
+var AddIcon = ({ stepLabel, ...props }) => /* @__PURE__ */ React84__default.createElement(React84__default.Fragment, null, /* @__PURE__ */ React84__default.createElement(
   Box,
   {
     as: "svg",
@@ -1587,7 +1609,7 @@ var AddIcon = (props) => /* @__PURE__ */ React86__default.createElement(React86_
     stroke: "currentColor",
     ...props
   },
-  /* @__PURE__ */ React86__default.createElement(
+  /* @__PURE__ */ React84__default.createElement(
     "line",
     {
       x1: "9",
@@ -1598,7 +1620,7 @@ var AddIcon = (props) => /* @__PURE__ */ React86__default.createElement(React86_
       strokeLinecap: "round"
     }
   ),
-  /* @__PURE__ */ React86__default.createElement(
+  /* @__PURE__ */ React84__default.createElement(
     "line",
     {
       x1: "15",
@@ -1609,7 +1631,7 @@ var AddIcon = (props) => /* @__PURE__ */ React86__default.createElement(React86_
       strokeLinecap: "round"
     }
   )
-), props.stepLabel > 1 && /* @__PURE__ */ React86__default.createElement(chakra.span, { paddingRight: "1" }, props.stepLabel.toString()));
+), stepLabel > 1 && /* @__PURE__ */ React84__default.createElement(chakra.span, { paddingRight: "1" }, stepLabel.toString()));
 var texts2 = createTexts({
   decrementButtonAriaLabel(stepSize) {
     return {
@@ -1635,7 +1657,7 @@ var PasswordInput = forwardRef(
     const formControlProps = useFormControlContext();
     const autoGeneratedId = `password-input-${useId()}`;
     const inputId = id ?? (formControlProps == null ? void 0 : formControlProps.id) ?? autoGeneratedId;
-    return /* @__PURE__ */ React86__default.createElement(InputGroup, { position: "relative" }, leftIcon && /* @__PURE__ */ React86__default.createElement(InputLeftElement2, null, leftIcon), /* @__PURE__ */ React86__default.createElement(
+    return /* @__PURE__ */ React84__default.createElement(InputGroup, { position: "relative" }, leftIcon && /* @__PURE__ */ React84__default.createElement(InputLeftElement2, null, leftIcon), /* @__PURE__ */ React84__default.createElement(
       Input$1,
       {
         ...props,
@@ -1647,7 +1669,7 @@ var PasswordInput = forwardRef(
         ref,
         "data-attachable": true
       }
-    ), /* @__PURE__ */ React86__default.createElement(FormLabel, { htmlFor: inputId, pointerEvents: "none" }, label), /* @__PURE__ */ React86__default.createElement(InputRightElement2, { width: "fit-content" }, /* @__PURE__ */ React86__default.createElement(
+    ), /* @__PURE__ */ React84__default.createElement(FormLabel, { htmlFor: inputId, pointerEvents: "none" }, label), /* @__PURE__ */ React84__default.createElement(InputRightElement2, { width: "fit-content" }, /* @__PURE__ */ React84__default.createElement(
       Button,
       {
         variant: "ghost",
@@ -1695,10 +1717,10 @@ var PhoneNumberInput = forwardRef(
         nationalNumber: ""
       }
     });
-    return /* @__PURE__ */ React86__default.createElement(AttachedInputs, { ...boxProps }, /* @__PURE__ */ React86__default.createElement(
+    return /* @__PURE__ */ React84__default.createElement(AttachedInputs, { ...boxProps }, /* @__PURE__ */ React84__default.createElement(
       Suspense,
       {
-        fallback: /* @__PURE__ */ React86__default.createElement(
+        fallback: /* @__PURE__ */ React84__default.createElement(
           InfoSelect,
           {
             isLabelSrOnly: true,
@@ -1707,10 +1729,10 @@ var PhoneNumberInput = forwardRef(
             height: "100%",
             value: "+47"
           },
-          /* @__PURE__ */ React86__default.createElement(Item, { key: "+47" }, "+47")
+          /* @__PURE__ */ React84__default.createElement(Item, { key: "+47" }, "+47")
         )
       },
-      /* @__PURE__ */ React86__default.createElement(
+      /* @__PURE__ */ React84__default.createElement(
         LazyCountryCodeSelect,
         {
           value: value.countryCode,
@@ -1723,7 +1745,7 @@ var PhoneNumberInput = forwardRef(
           width: "6.25rem"
         }
       )
-    ), /* @__PURE__ */ React86__default.createElement(
+    ), /* @__PURE__ */ React84__default.createElement(
       Input,
       {
         ref,
@@ -1758,13 +1780,13 @@ var texts4 = createTexts({
     sv: "Landskod"
   }
 });
-var LazyCountryCodeSelect = React86__default.lazy(() => import('./CountryCodeSelect-BF22CLZQ.mjs'));
+var LazyCountryCodeSelect = React84__default.lazy(() => import('./CountryCodeSelect-PWHXKGPJ.mjs'));
 var Radio = forwardRef((props, ref) => {
-  return /* @__PURE__ */ React86__default.createElement(Radio$1, { ...props, ref });
+  return /* @__PURE__ */ React84__default.createElement(Radio$1, { ...props, ref });
 });
 var RadioGroup = forwardRef(
   ({ children, direction: direction2 = "row", ...rest }, ref) => {
-    return /* @__PURE__ */ React86__default.createElement(RadioGroup$1, { ...rest, ref }, /* @__PURE__ */ React86__default.createElement(Stack$1, { direction: direction2 }, children));
+    return /* @__PURE__ */ React84__default.createElement(RadioGroup$1, { ...rest, ref }, /* @__PURE__ */ React84__default.createElement(Stack$1, { direction: direction2 }, children));
   }
 );
 var SearchInput = forwardRef(
@@ -1774,7 +1796,7 @@ var SearchInput = forwardRef(
     const formControlProps = useFormControlContext();
     const autoGeneratedId = useId();
     const inputId = props.id ?? (formControlProps == null ? void 0 : formControlProps.id) ?? autoGeneratedId;
-    return /* @__PURE__ */ React86__default.createElement(InputGroup, { position: "relative" }, /* @__PURE__ */ React86__default.createElement(InputLeftElement2, null, /* @__PURE__ */ React86__default.createElement(SearchOutline24Icon, null)), /* @__PURE__ */ React86__default.createElement(
+    return /* @__PURE__ */ React84__default.createElement(InputGroup, { position: "relative" }, /* @__PURE__ */ React84__default.createElement(InputLeftElement2, null, /* @__PURE__ */ React84__default.createElement(SearchOutline24Icon, null)), /* @__PURE__ */ React84__default.createElement(
       Input$1,
       {
         paddingLeft: 7,
@@ -1791,7 +1813,7 @@ var SearchInput = forwardRef(
         placeholder: " ",
         "data-attachable": true
       }
-    ), /* @__PURE__ */ React86__default.createElement(FormLabel, { htmlFor: inputId, pointerEvents: "none" }, label ?? t2(texts5.label)), showClearButton && /* @__PURE__ */ React86__default.createElement(InputRightElement2, { width: "fit-content" }, /* @__PURE__ */ React86__default.createElement(
+    ), /* @__PURE__ */ React84__default.createElement(FormLabel, { htmlFor: inputId, pointerEvents: "none" }, label ?? t2(texts5.label)), showClearButton && /* @__PURE__ */ React84__default.createElement(InputRightElement2, { width: "fit-content" }, /* @__PURE__ */ React84__default.createElement(
       IconButton$1,
       {
         variant: "ghost",
@@ -1799,7 +1821,7 @@ var SearchInput = forwardRef(
         size: "sm",
         marginRight: 1,
         "aria-label": t2(texts5.reset),
-        icon: /* @__PURE__ */ React86__default.createElement(CloseOutline24Icon, null),
+        icon: /* @__PURE__ */ React84__default.createElement(CloseOutline24Icon, null),
         onClick: onReset
       }
     )));
@@ -1821,7 +1843,7 @@ var texts5 = createTexts({
 });
 var Switch = forwardRef(
   ({ size: size2 = "md", ...props }, ref) => {
-    return /* @__PURE__ */ React86__default.createElement(Switch$1, { size: size2, ...props, ref });
+    return /* @__PURE__ */ React84__default.createElement(Switch$1, { size: size2, ...props, ref });
   }
 );
 var Textarea = forwardRef((props, ref) => {
@@ -1832,7 +1854,7 @@ var Textarea = forwardRef((props, ref) => {
   const formControlProps = useFormControlContext();
   const fallbackId = `textarea-${useId()}`;
   const inputId = props.id ?? (formControlProps == null ? void 0 : formControlProps.id) ?? fallbackId;
-  return /* @__PURE__ */ React86__default.createElement(InputGroup, { position: "relative", ...spacingProps }, /* @__PURE__ */ React86__default.createElement(Textarea$1, { ...rest, id: inputId, ref, placeholder: " " }), label && /* @__PURE__ */ React86__default.createElement(FormLabel$1, { htmlFor: inputId, id: `${inputId}-label` }, label));
+  return /* @__PURE__ */ React84__default.createElement(InputGroup, { position: "relative", ...spacingProps }, /* @__PURE__ */ React84__default.createElement(Textarea$1, { ...rest, id: inputId, ref, placeholder: " " }), label && /* @__PURE__ */ React84__default.createElement(FormLabel$1, { htmlFor: inputId, id: `${inputId}-label` }, label));
 });
 function getSpacingProps(props) {
   const {
@@ -1894,7 +1916,7 @@ function getSpacingProps(props) {
 }
 
 // src/layout/RadioCardGroup.tsx
-var RadioCardGroupContext = React86__default.createContext(null);
+var RadioCardGroupContext = React84__default.createContext(null);
 var RadioCardGroup = ({
   children,
   name,
@@ -1912,7 +1934,7 @@ var RadioCardGroup = ({
     setSelectedValue(value);
     onChange && onChange(value);
   };
-  return /* @__PURE__ */ React86__default.createElement(
+  return /* @__PURE__ */ React84__default.createElement(
     RadioCardGroupContext.Provider,
     {
       value: {
@@ -1923,7 +1945,7 @@ var RadioCardGroup = ({
         defaultValue: defaultValue || ""
       }
     },
-    /* @__PURE__ */ React86__default.createElement(Stack$1, { as: "fieldset", direction: direction2, ...props }, groupLabel && /* @__PURE__ */ React86__default.createElement(FormLabel, { as: "legend", id: groupLabel }, groupLabel), children)
+    /* @__PURE__ */ React84__default.createElement(Stack$1, { as: "fieldset", direction: direction2, ...props }, groupLabel && /* @__PURE__ */ React84__default.createElement(FormLabel, { as: "legend", id: groupLabel }, groupLabel), children)
   );
 };
 
@@ -1965,13 +1987,13 @@ var RadioCard = forwardRef(
       }
     }, [isKeyboardUser, isChecked]);
     const inputId = `radio-card-${useId()}`;
-    return /* @__PURE__ */ React86__default.createElement(
+    return /* @__PURE__ */ React84__default.createElement(
       Box,
       {
         onFocus: () => isKeyboardUser && setFocus(true),
         onBlur: () => setFocus(false)
       },
-      /* @__PURE__ */ React86__default.createElement(
+      /* @__PURE__ */ React84__default.createElement(
         chakra.input,
         {
           type: "radio",
@@ -1984,7 +2006,7 @@ var RadioCard = forwardRef(
           __css: styles3.radioInput
         }
       ),
-      /* @__PURE__ */ React86__default.createElement(
+      /* @__PURE__ */ React84__default.createElement(
         Box,
         {
           as: "label",
@@ -2011,7 +2033,7 @@ var StaticCard = forwardRef(
     const styles3 = useStyleConfig("StaticCard", {
       colorScheme
     });
-    return /* @__PURE__ */ React86__default.createElement(Box, { __css: styles3, ...props, ref }, children);
+    return /* @__PURE__ */ React84__default.createElement(Box, { __css: styles3, ...props, ref }, children);
   }
 );
 var PressableCard = forwardRef(
@@ -2019,37 +2041,21 @@ var PressableCard = forwardRef(
     const styles3 = useStyleConfig("PressableCard", {
       variant
     });
-    return /* @__PURE__ */ React86__default.createElement(Box, { __css: styles3, ...props, ref }, children);
+    return /* @__PURE__ */ React84__default.createElement(Box, { __css: styles3, ...props, ref }, children);
   }
 );
-var AccordionContext = React86__default.createContext(null);
-var AccordionProvider = ({
-  size: size2,
-  ...props
-}) => {
-  return /* @__PURE__ */ React86__default.createElement(AccordionContext.Provider, { value: { size: size2 }, ...props });
-};
-var useAccordionContext = () => {
-  const context = React86__default.useContext(AccordionContext);
-  if (context === null) {
-    throw new Error(
-      "useAccordionContext must be used within AccordionProvider"
-    );
-  }
-  return context;
-};
 var Accordion = forwardRef(
   ({ children, spacing: spacing3 = 2, ...props }, ref) => {
     const defaultIndex = typeof props.defaultIndex === "number" && props.allowMultiple ? [props.defaultIndex] : props.defaultIndex;
-    return /* @__PURE__ */ React86__default.createElement(AccordionProvider, { size: props.size }, /* @__PURE__ */ React86__default.createElement(
+    return /* @__PURE__ */ React84__default.createElement(
       Accordion$1,
       {
         ...props,
         ref,
         defaultIndex
       },
-      /* @__PURE__ */ React86__default.createElement(Stack, { spacing: spacing3 }, children)
-    ));
+      /* @__PURE__ */ React84__default.createElement(Stack, { spacing: spacing3 }, children)
+    );
   }
 );
 var Expandable = ({
@@ -2057,24 +2063,21 @@ var Expandable = ({
   headingLevel,
   title,
   leftIcon,
-  size: size2 = "md",
   defaultOpen,
   isOpen,
   onChange = () => {
   },
   ...rest
 }) => {
-  return /* @__PURE__ */ React86__default.createElement(
+  return /* @__PURE__ */ React84__default.createElement(
     Accordion,
     {
       ...rest,
       index: isOpen ? 0 : void 0,
       defaultIndex: defaultOpen ? 0 : void 0,
-      allowMultiple: true,
-      size: size2,
       onChange: (expandedIndex) => onChange(expandedIndex === 0)
     },
-    /* @__PURE__ */ React86__default.createElement(
+    /* @__PURE__ */ React84__default.createElement(
       ExpandableItem,
       {
         headingLevel,
@@ -2092,11 +2095,10 @@ var ExpandableItem = ({
   leftIcon,
   ...rest
 }) => {
-  const { size: size2 } = useAccordionContext();
-  warnAboutMismatchingIcon({ icon: leftIcon, size: size2 });
-  return /* @__PURE__ */ React86__default.createElement(AccordionItem, { ...rest }, /* @__PURE__ */ React86__default.createElement(Box, { as: headingLevel }, /* @__PURE__ */ React86__default.createElement(AccordionButton, null, /* @__PURE__ */ React86__default.createElement(Flex, { alignItems: "center" }, leftIcon && /* @__PURE__ */ React86__default.createElement(Box, { marginRight: 1 }, leftIcon), title), /* @__PURE__ */ React86__default.createElement(AccordionIcon, null))), /* @__PURE__ */ React86__default.createElement(AccordionPanel, null, children));
+  warnAboutMismatchingIcon({ icon: leftIcon });
+  return /* @__PURE__ */ React84__default.createElement(AccordionItem, { ...rest }, /* @__PURE__ */ React84__default.createElement(Box, { as: headingLevel }, /* @__PURE__ */ React84__default.createElement(AccordionButton, null, /* @__PURE__ */ React84__default.createElement(Flex, { alignItems: "center" }, leftIcon && /* @__PURE__ */ React84__default.createElement(Box, { marginRight: 1 }, leftIcon), title), /* @__PURE__ */ React84__default.createElement(AccordionIcon, null))), /* @__PURE__ */ React84__default.createElement(AccordionPanel, null, children));
 };
-var warnAboutMismatchingIcon = ({ icon, size: size2 }) => {
+var warnAboutMismatchingIcon = ({ icon }) => {
   var _a6, _b5;
   if (process.env.NODE_ENV !== "production") {
     const displayName = (_b5 = (_a6 = icon == null ? void 0 : icon.type) == null ? void 0 : _a6.render) == null ? void 0 : _b5.displayName;
@@ -2112,18 +2114,9 @@ var warnAboutMismatchingIcon = ({ icon, size: size2 }) => {
       );
       return;
     }
-    if (size2 === "lg" && !displayName.includes("30Icon")) {
+    if (!displayName.includes("24Icon")) {
       console.warn(
-        `The icon you passed was of the wrong size for the lg size. You passed ${displayName}, replace it with ${displayName.replace(
-          /(\d{2})Icon/,
-          "30Icon"
-        )}.`
-      );
-      return;
-    }
-    if (["md"].includes(size2) && !displayName.includes("24Icon")) {
-      console.warn(
-        `The icon you passed was of the wrong size for the ${size2} size. You passed ${displayName}, replace it with ${displayName.replace(
+        `The icon you passed was of the wrong size. You passed ${displayName}, replace it with ${displayName.replace(
           /(\d{2})Icon/,
           "24Icon"
         )}.`
@@ -2143,7 +2136,7 @@ function LanguageProvider({
   language,
   children
 }) {
-  return /* @__PURE__ */ React86__default.createElement(LanguageContext.Provider, { value: language }, children);
+  return /* @__PURE__ */ React84__default.createElement(LanguageContext.Provider, { value: language }, children);
 }
 function useLanguage() {
   const language = useContext(LanguageContext);
@@ -2159,8 +2152,8 @@ function useTranslation() {
   };
   return { t: t2, language };
 }
-function createTexts(texts28) {
-  return texts28;
+function createTexts(texts29) {
+  return texts29;
 }
 var hydrating = true;
 function useHydrated() {
@@ -2175,11 +2168,11 @@ function useHydrated() {
 // src/loader/ClientOnly.tsx
 var ClientOnly = ({ children, fallback = null }) => {
   const isHydrated = useHydrated();
-  return /* @__PURE__ */ React86__default.createElement(React86__default.Fragment, null, isHydrated ? children() : fallback);
+  return /* @__PURE__ */ React84__default.createElement(React84__default.Fragment, null, isHydrated ? children() : fallback);
 };
 function Lottie({ animationData }) {
   const { View } = useLottie({ animationData, loop: true });
-  return /* @__PURE__ */ React86__default.createElement(React86__default.Fragment, null, View);
+  return /* @__PURE__ */ React84__default.createElement(React84__default.Fragment, null, View);
 }
 
 // src/loader/ColorInlineLoader.tsx
@@ -2188,7 +2181,7 @@ var ColorInlineLoader = ({
   maxWidth,
   ...props
 }) => {
-  return /* @__PURE__ */ React86__default.createElement(Center, { ...props }, /* @__PURE__ */ React86__default.createElement(Box, { width, maxWidth }, /* @__PURE__ */ React86__default.createElement(ClientOnly, null, () => /* @__PURE__ */ React86__default.createElement(Lottie, { animationData: inlineLoaderColorData }))));
+  return /* @__PURE__ */ React84__default.createElement(Center, { ...props }, /* @__PURE__ */ React84__default.createElement(Box, { width, maxWidth }, /* @__PURE__ */ React84__default.createElement(ClientOnly, null, () => /* @__PURE__ */ React84__default.createElement(Lottie, { animationData: inlineLoaderColorData }))));
 };
 var ColorSpinner = ({
   children,
@@ -2196,24 +2189,24 @@ var ColorSpinner = ({
   maxWidth,
   ...props
 }) => {
-  return /* @__PURE__ */ React86__default.createElement(Center, { flexDirection: "column", ...props }, /* @__PURE__ */ React86__default.createElement(Box, { width, maxWidth }, /* @__PURE__ */ React86__default.createElement(ClientOnly, null, () => /* @__PURE__ */ React86__default.createElement(Lottie, { animationData: spinnerColorData }))), children && /* @__PURE__ */ React86__default.createElement(Box, { marginTop: 3, fontWeight: "bold" }, children));
+  return /* @__PURE__ */ React84__default.createElement(Center, { flexDirection: "column", ...props }, /* @__PURE__ */ React84__default.createElement(Box, { width, maxWidth }, /* @__PURE__ */ React84__default.createElement(ClientOnly, null, () => /* @__PURE__ */ React84__default.createElement(Lottie, { animationData: spinnerColorData }))), children && /* @__PURE__ */ React84__default.createElement(Box, { marginTop: 3, fontWeight: "bold" }, children));
 };
 var ContentLoader = ({ children, ...props }) => {
-  return /* @__PURE__ */ React86__default.createElement(Box, { ...props }, /* @__PURE__ */ React86__default.createElement(Box, { maxWidth: "140px", marginX: "auto" }, /* @__PURE__ */ React86__default.createElement(ClientOnly, null, () => /* @__PURE__ */ React86__default.createElement(Lottie, { animationData: contentLoaderData }))), children && /* @__PURE__ */ React86__default.createElement(Box, { textAlign: "center", fontWeight: "bold" }, children));
+  return /* @__PURE__ */ React84__default.createElement(Box, { ...props }, /* @__PURE__ */ React84__default.createElement(Box, { maxWidth: "140px", marginX: "auto" }, /* @__PURE__ */ React84__default.createElement(ClientOnly, null, () => /* @__PURE__ */ React84__default.createElement(Lottie, { animationData: contentLoaderData }))), children && /* @__PURE__ */ React84__default.createElement(Box, { textAlign: "center", fontWeight: "bold" }, children));
 };
 var DarkFullScreenLoader = ({
   width,
   maxWidth,
   ...props
 }) => {
-  return /* @__PURE__ */ React86__default.createElement(Center, { height: "100%", background: "darkTeal", ...props }, /* @__PURE__ */ React86__default.createElement(Box, { width, maxWidth }, /* @__PURE__ */ React86__default.createElement(ClientOnly, null, () => /* @__PURE__ */ React86__default.createElement(Lottie, { animationData: fullScreenLoaderWhiteData }))));
+  return /* @__PURE__ */ React84__default.createElement(Center, { height: "100%", background: "darkTeal", ...props }, /* @__PURE__ */ React84__default.createElement(Box, { width, maxWidth }, /* @__PURE__ */ React84__default.createElement(ClientOnly, null, () => /* @__PURE__ */ React84__default.createElement(Lottie, { animationData: fullScreenLoaderWhiteData }))));
 };
 var DarkInlineLoader = ({
   width,
   maxWidth,
   ...props
 }) => {
-  return /* @__PURE__ */ React86__default.createElement(Center, { ...props }, /* @__PURE__ */ React86__default.createElement(Box, { width, maxWidth }, /* @__PURE__ */ React86__default.createElement(ClientOnly, null, () => /* @__PURE__ */ React86__default.createElement(Lottie, { animationData: inlineLoaderDarkData }))));
+  return /* @__PURE__ */ React84__default.createElement(Center, { ...props }, /* @__PURE__ */ React84__default.createElement(Box, { width, maxWidth }, /* @__PURE__ */ React84__default.createElement(ClientOnly, null, () => /* @__PURE__ */ React84__default.createElement(Lottie, { animationData: inlineLoaderDarkData }))));
 };
 var DarkSpinner = ({
   children,
@@ -2223,21 +2216,21 @@ var DarkSpinner = ({
 }) => {
   const { colorMode } = useColorMode();
   const spinnerData = colorMode === "dark" ? spinnerLightData : spinnerDarkData;
-  return /* @__PURE__ */ React86__default.createElement(Center, { flexDirection: "column", ...props }, /* @__PURE__ */ React86__default.createElement(Box, { width, maxWidth }, /* @__PURE__ */ React86__default.createElement(ClientOnly, null, () => /* @__PURE__ */ React86__default.createElement(Lottie, { animationData: spinnerData }))), children && /* @__PURE__ */ React86__default.createElement(Box, { marginTop: 3, fontWeight: "bold" }, children));
+  return /* @__PURE__ */ React84__default.createElement(Center, { flexDirection: "column", ...props }, /* @__PURE__ */ React84__default.createElement(Box, { width, maxWidth }, /* @__PURE__ */ React84__default.createElement(ClientOnly, null, () => /* @__PURE__ */ React84__default.createElement(Lottie, { animationData: spinnerData }))), children && /* @__PURE__ */ React84__default.createElement(Box, { marginTop: 3, fontWeight: "bold" }, children));
 };
 var LightFullScreenLoader = ({
   width,
   maxWidth,
   ...props
 }) => {
-  return /* @__PURE__ */ React86__default.createElement(Center, { height: "100%", background: "white", ...props }, /* @__PURE__ */ React86__default.createElement(Box, { width, maxWidth }, /* @__PURE__ */ React86__default.createElement(ClientOnly, null, () => /* @__PURE__ */ React86__default.createElement(Lottie, { animationData: fullScreenLoaderBlackData }))));
+  return /* @__PURE__ */ React84__default.createElement(Center, { height: "100%", background: "white", ...props }, /* @__PURE__ */ React84__default.createElement(Box, { width, maxWidth }, /* @__PURE__ */ React84__default.createElement(ClientOnly, null, () => /* @__PURE__ */ React84__default.createElement(Lottie, { animationData: fullScreenLoaderBlackData }))));
 };
 var LightInlineLoader = ({
   width,
   maxWidth,
   ...props
 }) => {
-  return /* @__PURE__ */ React86__default.createElement(Center, { ...props }, /* @__PURE__ */ React86__default.createElement(Box, { width, maxWidth }, /* @__PURE__ */ React86__default.createElement(ClientOnly, null, () => /* @__PURE__ */ React86__default.createElement(Lottie, { animationData: inlineLoaderLightData }))));
+  return /* @__PURE__ */ React84__default.createElement(Center, { ...props }, /* @__PURE__ */ React84__default.createElement(Box, { width, maxWidth }, /* @__PURE__ */ React84__default.createElement(ClientOnly, null, () => /* @__PURE__ */ React84__default.createElement(Lottie, { animationData: inlineLoaderLightData }))));
 };
 var LightSpinner = ({
   children,
@@ -2245,7 +2238,7 @@ var LightSpinner = ({
   maxWidth,
   ...props
 }) => {
-  return /* @__PURE__ */ React86__default.createElement(Center, { flexDirection: "column", ...props }, /* @__PURE__ */ React86__default.createElement(Box, { width, maxWidth }, /* @__PURE__ */ React86__default.createElement(ClientOnly, null, () => /* @__PURE__ */ React86__default.createElement(Lottie, { animationData: spinnerLightData }))), children && /* @__PURE__ */ React86__default.createElement(Box, { marginTop: 3, fontWeight: "bold" }, children));
+  return /* @__PURE__ */ React84__default.createElement(Center, { flexDirection: "column", ...props }, /* @__PURE__ */ React84__default.createElement(Box, { width, maxWidth }, /* @__PURE__ */ React84__default.createElement(ClientOnly, null, () => /* @__PURE__ */ React84__default.createElement(Lottie, { animationData: spinnerLightData }))), children && /* @__PURE__ */ React84__default.createElement(Box, { marginTop: 3, fontWeight: "bold" }, children));
 };
 var useRotatingLabel = ({ label, delay }) => {
   const loadingTextArray = useMemo(
@@ -2282,7 +2275,7 @@ var ProgressBar = ({
     "aria-label": ariaLabel || t2(texts6.label(value))
   });
   const styles3 = useMultiStyleConfig("ProgressBar", {});
-  return /* @__PURE__ */ React86__default.createElement(React86__default.Fragment, null, /* @__PURE__ */ React86__default.createElement(
+  return /* @__PURE__ */ React84__default.createElement(React84__default.Fragment, null, /* @__PURE__ */ React84__default.createElement(
     Box,
     {
       ...progressBarProps,
@@ -2290,8 +2283,8 @@ var ProgressBar = ({
       __css: styles3.container,
       ...rest
     },
-    /* @__PURE__ */ React86__default.createElement(Box, { width, __css: styles3.background }, /* @__PURE__ */ React86__default.createElement(Box, { __css: styles3.progress, height, width: `${value}%` })),
-    currentLoadingText && /* @__PURE__ */ React86__default.createElement(Text, { sx: styles3.description, ...labelProps }, currentLoadingText)
+    /* @__PURE__ */ React84__default.createElement(Box, { width, __css: styles3.background }, /* @__PURE__ */ React84__default.createElement(Box, { __css: styles3.progress, height, width: `${value}%` })),
+    currentLoadingText && /* @__PURE__ */ React84__default.createElement(Text, { sx: styles3.description, ...labelProps }, currentLoadingText)
   ));
 };
 var texts6 = createTexts({
@@ -2325,7 +2318,7 @@ var ProgressLoader = ({
   const progressPathLength = ((_a6 = pathRef.current) == null ? void 0 : _a6.getTotalLength()) ?? 0;
   const progress = (value - 100) / 100 * progressPathLength;
   const id = useId();
-  return /* @__PURE__ */ React86__default.createElement(Box, { ...progressBarProps, minWidth: "100px", width, ...rest }, /* @__PURE__ */ React86__default.createElement(Box, { as: "svg", viewBox: "0 0 246 78", fill: "none" }, /* @__PURE__ */ React86__default.createElement(
+  return /* @__PURE__ */ React84__default.createElement(Box, { ...progressBarProps, minWidth: "100px", width, ...rest }, /* @__PURE__ */ React84__default.createElement(Box, { as: "svg", viewBox: "0 0 246 78", fill: "none" }, /* @__PURE__ */ React84__default.createElement(
     Box,
     {
       as: "path",
@@ -2333,7 +2326,7 @@ var ProgressLoader = ({
       d: "M14.0479 44.8251C19.4332 44.8251 23.7988 40.5242 23.7988 35.2187C23.7988 29.9133 19.4332 25.6124 14.0479 25.6124C8.66254 25.6124 4.29688 29.9133 4.29688 35.2187C4.29688 40.5242 8.66254 44.8251 14.0479 44.8251Z",
       fill: "#FFB466"
     }
-  ), /* @__PURE__ */ React86__default.createElement(
+  ), /* @__PURE__ */ React84__default.createElement(
     Box,
     {
       as: "path",
@@ -2344,7 +2337,7 @@ var ProgressLoader = ({
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }
-  ), /* @__PURE__ */ React86__default.createElement(
+  ), /* @__PURE__ */ React84__default.createElement(
     Box,
     {
       as: "path",
@@ -2359,7 +2352,7 @@ var ProgressLoader = ({
       transition: "stroke-dashoffset .2s ease-out",
       ref: pathRef
     }
-  ), /* @__PURE__ */ React86__default.createElement(
+  ), /* @__PURE__ */ React84__default.createElement(
     Box,
     {
       as: "path",
@@ -2367,7 +2360,7 @@ var ProgressLoader = ({
       d: "M226.025 44.8251C231.411 44.8251 235.776 40.5242 235.776 35.2187C235.776 29.9133 231.411 25.6124 226.025 25.6124C220.64 25.6124 216.274 29.9133 216.274 35.2187C216.274 40.5242 220.64 44.8251 226.025 44.8251Z",
       fill: "#688CBA"
     }
-  )), currentLoadingText && /* @__PURE__ */ React86__default.createElement(
+  )), currentLoadingText && /* @__PURE__ */ React84__default.createElement(
     Text,
     {
       textAlign: "center",
@@ -2386,9 +2379,9 @@ var texts7 = createTexts({
     en: `${value}% done`
   })
 });
-var Skeleton = forwardRef((props, ref) => /* @__PURE__ */ React86__default.createElement(Skeleton$1, { ...props, ref }));
-var SkeletonCircle = (props) => /* @__PURE__ */ React86__default.createElement(SkeletonCircle$1, { boxSize: 6, borderRadius: "50%", ...props });
-var SkeletonText = (props) => /* @__PURE__ */ React86__default.createElement(SkeletonText$1, { boxSize: 6, ...props });
+var Skeleton = forwardRef((props, ref) => /* @__PURE__ */ React84__default.createElement(Skeleton$1, { ...props, ref }));
+var SkeletonCircle = (props) => /* @__PURE__ */ React84__default.createElement(SkeletonCircle$1, { boxSize: 6, borderRadius: "50%", ...props });
+var SkeletonText = (props) => /* @__PURE__ */ React84__default.createElement(SkeletonText$1, { boxSize: 6, ...props });
 
 // src/button/Button.tsx
 var Button2 = forwardRef((props, ref) => {
@@ -2418,7 +2411,7 @@ var Button2 = forwardRef((props, ref) => {
   if (fontWeight) {
     styles3.fontWeight = fontWeight;
   }
-  return /* @__PURE__ */ React86__default.createElement(
+  return /* @__PURE__ */ React84__default.createElement(
     Box,
     {
       ...rest,
@@ -2432,7 +2425,7 @@ var Button2 = forwardRef((props, ref) => {
       position: "relative",
       fontFamily: "Vy Sans"
     },
-    isLoading && /* @__PURE__ */ React86__default.createElement(Center, { position: "absolute", right: 0, left: 0, top: 1, bottom: 0 }, /* @__PURE__ */ React86__default.createElement(
+    isLoading && /* @__PURE__ */ React84__default.createElement(Center, { position: "absolute", right: 0, left: 0, top: 1, bottom: 0 }, /* @__PURE__ */ React84__default.createElement(
       ColorInlineLoader,
       {
         maxWidth: getLoaderWidth(finalSize),
@@ -2441,7 +2434,7 @@ var Button2 = forwardRef((props, ref) => {
         marginY: 2
       }
     )),
-    /* @__PURE__ */ React86__default.createElement(
+    /* @__PURE__ */ React84__default.createElement(
       Flex,
       {
         gap: 1,
@@ -2451,7 +2444,7 @@ var Button2 = forwardRef((props, ref) => {
         visibility: isLoading ? "hidden" : "visible",
         "aria-hidden": isLoading
       },
-      /* @__PURE__ */ React86__default.createElement(Flex, { gap: 1, alignItems: "center" }, leftIcon, /* @__PURE__ */ React86__default.createElement(
+      /* @__PURE__ */ React84__default.createElement(Flex, { gap: 1, alignItems: "center" }, leftIcon, /* @__PURE__ */ React84__default.createElement(
         Box,
         {
           visibility: isLoading ? "hidden" : "visible",
@@ -2492,14 +2485,14 @@ var texts8 = createTexts({
     sv: "Laddar\u2026"
   }
 });
-var ButtonGroup = forwardRef((props, ref) => /* @__PURE__ */ React86__default.createElement(ButtonGroup$1, { ...props, ref }));
+var ButtonGroup = forwardRef((props, ref) => /* @__PURE__ */ React84__default.createElement(ButtonGroup$1, { ...props, ref }));
 var IconButton = forwardRef(
-  ({ ...props }, ref) => /* @__PURE__ */ React86__default.createElement(
+  ({ ...props }, ref) => /* @__PURE__ */ React84__default.createElement(
     IconButton$1,
     {
       title: props["aria-label"],
       ...props,
-      spinner: /* @__PURE__ */ React86__default.createElement(ColorSpinner, { width: "80%", height: "80%", marginX: 1, marginTop: 1 }),
+      spinner: /* @__PURE__ */ React84__default.createElement(ColorSpinner, { width: "80%", height: "80%", marginX: 1, marginTop: 1 }),
       ref
     }
   )
@@ -2509,7 +2502,7 @@ var IconButton = forwardRef(
 var CloseButton = forwardRef(
   ({ size: size2 = "sm", ...props }, ref) => {
     const { t: t2 } = useTranslation();
-    return /* @__PURE__ */ React86__default.createElement(
+    return /* @__PURE__ */ React84__default.createElement(
       IconButton,
       {
         ref,
@@ -2526,11 +2519,11 @@ var getIcon = (size2) => {
   switch (size2) {
     case "xs":
     case "sm":
-      return /* @__PURE__ */ React86__default.createElement(CloseFill18Icon, null);
+      return /* @__PURE__ */ React84__default.createElement(CloseFill18Icon, null);
     case "md":
-      return /* @__PURE__ */ React86__default.createElement(CloseFill24Icon, null);
+      return /* @__PURE__ */ React84__default.createElement(CloseFill24Icon, null);
     case "lg":
-      return /* @__PURE__ */ React86__default.createElement(CloseFill30Icon, null);
+      return /* @__PURE__ */ React84__default.createElement(CloseFill30Icon, null);
   }
 };
 var texts9 = createTexts({
@@ -2552,7 +2545,7 @@ var FloatingActionButton = forwardRef(
     placement = "bottom right",
     ...props
   }, ref) => {
-    const [isTextVisible, setIsTextVisible] = React86__default.useState(
+    const [isTextVisible, setIsTextVisible] = React84__default.useState(
       externalIsTextVisible !== void 0 ? externalIsTextVisible : false
     );
     const scrollDirection = useScrollDirection();
@@ -2574,7 +2567,7 @@ var FloatingActionButton = forwardRef(
       isTextVisible,
       placement
     });
-    return /* @__PURE__ */ React86__default.createElement(
+    return /* @__PURE__ */ React84__default.createElement(
       MotionBox,
       {
         __css: style.container,
@@ -2582,8 +2575,8 @@ var FloatingActionButton = forwardRef(
         ref,
         ...props
       },
-      /* @__PURE__ */ React86__default.createElement(Box, { __css: style.icon }, icon),
-      /* @__PURE__ */ React86__default.createElement(
+      /* @__PURE__ */ React84__default.createElement(Box, { __css: style.icon }, icon),
+      /* @__PURE__ */ React84__default.createElement(
         MotionBox,
         {
           animate: isTextVisible ? "show" : "hide",
@@ -2608,11 +2601,11 @@ var FloatingActionButton = forwardRef(
   }
 );
 var useScrollDirection = () => {
-  const [scrollDirection, setScrollDirection] = React86__default.useState(null);
-  const lastScrollPosition = React86__default.useRef(
+  const [scrollDirection, setScrollDirection] = React84__default.useState(null);
+  const lastScrollPosition = React84__default.useRef(
     typeof window !== "undefined" ? window.scrollY : 0
   );
-  React86__default.useEffect(() => {
+  React84__default.useEffect(() => {
     const onScroll = () => {
       const delta = window.scrollY - lastScrollPosition.current;
       if (delta === 0) {
@@ -2631,7 +2624,7 @@ var useScrollDirection = () => {
 var AlertIcon = ({ variant }) => {
   const Icon = getIcon2(variant);
   const { t: t2 } = useTranslation();
-  return /* @__PURE__ */ React86__default.createElement(
+  return /* @__PURE__ */ React84__default.createElement(
     Icon,
     {
       flexShrink: 0,
@@ -2693,7 +2686,7 @@ var BaseAlert = ({
   ...boxProps
 }) => {
   const styles3 = useMultiStyleConfig("Alert", { variant });
-  return /* @__PURE__ */ React86__default.createElement(Box, { __css: styles3.container, ...boxProps }, children);
+  return /* @__PURE__ */ React84__default.createElement(Box, { __css: styles3.container, ...boxProps }, children);
 };
 
 // src/alert/ClosableAlert.tsx
@@ -2714,17 +2707,17 @@ var ClosableAlert = ({
     externalOnClose();
     onClose();
   };
-  return /* @__PURE__ */ React86__default.createElement(BaseAlert, { variant }, /* @__PURE__ */ React86__default.createElement(
+  return /* @__PURE__ */ React84__default.createElement(BaseAlert, { variant }, /* @__PURE__ */ React84__default.createElement(
     IconButton,
     {
       variant: "ghost",
       size: "sm",
       onClick: handleClose,
-      icon: /* @__PURE__ */ React86__default.createElement(CloseFill18Icon, null),
+      icon: /* @__PURE__ */ React84__default.createElement(CloseFill18Icon, null),
       "aria-label": t2(texts11.close),
       sx: styles3.closeButton
     }
-  ), /* @__PURE__ */ React86__default.createElement(AlertIcon, { variant }), /* @__PURE__ */ React86__default.createElement(Flex, { direction: "column", gap: title ? 2 : void 0, textAlign: "left" }, title && /* @__PURE__ */ React86__default.createElement(Box, { fontWeight: "bold" }, title), /* @__PURE__ */ React86__default.createElement(Box, { marginRight: 1 }, children)));
+  ), /* @__PURE__ */ React84__default.createElement(AlertIcon, { variant }), /* @__PURE__ */ React84__default.createElement(Flex, { direction: "column", gap: title ? 2 : void 0, textAlign: "left" }, title && /* @__PURE__ */ React84__default.createElement(Box, { fontWeight: "bold" }, title), /* @__PURE__ */ React84__default.createElement(Box, { marginRight: 1 }, children)));
 };
 var texts11 = createTexts({
   close: {
@@ -2745,7 +2738,7 @@ var ExpandableAlert = ({
   ...boxProps
 }) => {
   const styles3 = useMultiStyleConfig("AlertExpandable", { variant });
-  return /* @__PURE__ */ React86__default.createElement(BaseAlert, { variant, ...boxProps, paddingX: 0, paddingY: 0 }, /* @__PURE__ */ React86__default.createElement(
+  return /* @__PURE__ */ React84__default.createElement(BaseAlert, { variant, ...boxProps, paddingX: 0, paddingY: 0 }, /* @__PURE__ */ React84__default.createElement(
     Accordion$1,
     {
       onChange: (expandedIndex) => onToggle(expandedIndex === 0),
@@ -2753,14 +2746,14 @@ var ExpandableAlert = ({
       allowToggle: true,
       flexGrow: "1"
     },
-    /* @__PURE__ */ React86__default.createElement(AccordionItem, null, /* @__PURE__ */ React86__default.createElement(AccordionButton, { sx: styles3.container }, /* @__PURE__ */ React86__default.createElement(
+    /* @__PURE__ */ React84__default.createElement(AccordionItem, null, /* @__PURE__ */ React84__default.createElement(AccordionButton, { sx: styles3.container }, /* @__PURE__ */ React84__default.createElement(
       Flex,
       {
         justifyContent: "space-between",
         alignItems: "center",
         flexGrow: "1"
       },
-      /* @__PURE__ */ React86__default.createElement(Flex, { as: headingLevel, alignItems: "center" }, /* @__PURE__ */ React86__default.createElement(AlertIcon, { variant }), /* @__PURE__ */ React86__default.createElement(
+      /* @__PURE__ */ React84__default.createElement(Flex, { as: headingLevel, alignItems: "center" }, /* @__PURE__ */ React84__default.createElement(AlertIcon, { variant }), /* @__PURE__ */ React84__default.createElement(
         Box,
         {
           as: "span",
@@ -2768,15 +2761,15 @@ var ExpandableAlert = ({
             // Truncate the title to one line
             display: "-webkit-box",
             overflow: "hidden",
-            "-webkit-line-clamp": "1",
-            "-webkit-box-orient": "vertical"
+            WebkitLineClamp: "1",
+            WebkitBoxOrient: "vertical"
           },
           color: "darkGrey"
         },
         title
       )),
-      /* @__PURE__ */ React86__default.createElement(AccordionIcon, { color: "darkGrey" })
-    )), /* @__PURE__ */ React86__default.createElement(AccordionPanel, null, children))
+      /* @__PURE__ */ React84__default.createElement(AccordionIcon, { color: "darkGrey" })
+    )), /* @__PURE__ */ React84__default.createElement(AccordionPanel, null, children))
   ));
 };
 var StaticAlert = ({
@@ -2784,35 +2777,23 @@ var StaticAlert = ({
   title,
   ...props
 }) => {
-  return /* @__PURE__ */ React86__default.createElement(BaseAlert, { ...props }, /* @__PURE__ */ React86__default.createElement(AlertIcon, { variant: props.variant }), /* @__PURE__ */ React86__default.createElement(Flex, { direction: "column", gap: title ? 2 : void 0, textAlign: "left" }, title && /* @__PURE__ */ React86__default.createElement(Box, { fontWeight: "bold" }, title), /* @__PURE__ */ React86__default.createElement(Box, null, children)));
+  return /* @__PURE__ */ React84__default.createElement(BaseAlert, { ...props }, /* @__PURE__ */ React84__default.createElement(AlertIcon, { variant: props.variant }), /* @__PURE__ */ React84__default.createElement(Flex, { direction: "column", gap: title ? 2 : void 0, textAlign: "left" }, title && /* @__PURE__ */ React84__default.createElement(Box, { fontWeight: "bold" }, title), /* @__PURE__ */ React84__default.createElement(Box, null, children)));
 };
 var Breadcrumb = (props) => {
   const iconColor = useColorModeValue("blackAlpha.400", "whiteAlpha.400");
-  return /* @__PURE__ */ React86__default.createElement(
+  return /* @__PURE__ */ React84__default.createElement(
     Breadcrumb$1,
     {
-      separator: /* @__PURE__ */ React86__default.createElement(DropdownRightFill18Icon, { color: iconColor }),
+      separator: /* @__PURE__ */ React84__default.createElement(DropdownRightFill18Icon, { color: iconColor }),
       ...props
     }
   );
 };
 var BreadcrumbItem = BreadcrumbItem$1;
 var BreadcrumbLink = BreadcrumbLink$1;
-var Card2 = forwardRef(
-  ({ size: size2 = "sm", colorScheme = "white", children, ...props }, ref) => {
-    console.warn(
-      "Warning: Card is deprecated. Use `StaticCard` or `PressableCard` instead."
-    );
-    const styles3 = useStyleConfig("Card", {
-      colorScheme,
-      size: size2
-    });
-    return /* @__PURE__ */ React86__default.createElement(Box, { __css: styles3, ...props, ref }, children);
-  }
-);
 var Badge = forwardRef(
   ({ icon, colorScheme = "grey", children, ...props }, ref) => {
-    return /* @__PURE__ */ React86__default.createElement(
+    return /* @__PURE__ */ React84__default.createElement(
       Badge$1,
       {
         colorScheme,
@@ -2820,12 +2801,12 @@ var Badge = forwardRef(
         paddingLeft: icon ? 1 : void 0,
         ref
       },
-      icon && React86__default.cloneElement(icon, { marginRight: 1 }),
+      icon && React84__default.cloneElement(icon, { marginRight: 1 }),
       children
     );
   }
 );
-var Code = forwardRef((props, ref) => /* @__PURE__ */ React86__default.createElement(Code$1, { ...props, ref }));
+var Code = forwardRef((props, ref) => /* @__PURE__ */ React84__default.createElement(Code$1, { ...props, ref }));
 var Heading2 = ({
   as,
   variant = "xl-display",
@@ -2835,11 +2816,11 @@ var Heading2 = ({
 }) => {
   const id = externalId ?? (autoId && typeof props.children === "string") ? slugify(props.children) : void 0;
   const color2 = useColorModeValue("text.primary.light", "text.primary.dark");
-  return /* @__PURE__ */ React86__default.createElement(Text, { as, textStyle: variant, id, color: color2, ...props });
+  return /* @__PURE__ */ React84__default.createElement(Text, { as, textStyle: variant, id, color: color2, ...props });
 };
 var Text4 = forwardRef(
   ({ variant = "sm", ...props }, ref) => {
-    return /* @__PURE__ */ React86__default.createElement(Text, { ...props, textStyle: variant, ref });
+    return /* @__PURE__ */ React84__default.createElement(Text, { ...props, textStyle: variant, ref });
   }
 );
 function CalendarCell({
@@ -2882,7 +2863,7 @@ function CalendarCell({
       { passive: false, once: true }
     );
   }, []);
-  return /* @__PURE__ */ React86__default.createElement(Box, { as: "td", ...cellProps, textAlign: "center", sx: styles3.cell }, /* @__PURE__ */ React86__default.createElement(
+  return /* @__PURE__ */ React84__default.createElement(Box, { as: "td", ...cellProps, textAlign: "center", sx: styles3.cell }, /* @__PURE__ */ React84__default.createElement(
     Box,
     {
       as: "button",
@@ -2944,8 +2925,8 @@ function CalendarGrid({
   const weeksInMonth = getWeeksInMonth(state2.visibleRange.start, locale);
   const weeksInMonthRange = new Array(weeksInMonth).fill(0).map((_, i) => i);
   const styles3 = useMultiStyleConfig("Datepicker", { variant });
-  return /* @__PURE__ */ React86__default.createElement("table", { ...gridProps }, /* @__PURE__ */ React86__default.createElement("thead", { ...headerProps }, /* @__PURE__ */ React86__default.createElement("tr", null, weekDays[language].map((day, index) => {
-    return /* @__PURE__ */ React86__default.createElement(
+  return /* @__PURE__ */ React84__default.createElement("table", { ...gridProps }, /* @__PURE__ */ React84__default.createElement("thead", { ...headerProps }, /* @__PURE__ */ React84__default.createElement("tr", null, weekDays[language].map((day, index) => {
+    return /* @__PURE__ */ React84__default.createElement(
       Text4,
       {
         as: "th",
@@ -2955,8 +2936,8 @@ function CalendarGrid({
       },
       day
     );
-  }))), /* @__PURE__ */ React86__default.createElement("tbody", null, weeksInMonthRange.map((weekIndex) => /* @__PURE__ */ React86__default.createElement("tr", { key: weekIndex }, state2.getDatesInWeek(weekIndex, startDate).map(
-    (date, dayIndex) => date ? /* @__PURE__ */ React86__default.createElement(
+  }))), /* @__PURE__ */ React84__default.createElement("tbody", null, weeksInMonthRange.map((weekIndex) => /* @__PURE__ */ React84__default.createElement("tr", { key: weekIndex }, state2.getDatesInWeek(weekIndex, startDate).map(
+    (date, dayIndex) => date ? /* @__PURE__ */ React84__default.createElement(
       CalendarCell,
       {
         variant,
@@ -2965,7 +2946,7 @@ function CalendarGrid({
         date,
         currentMonth: startDate
       }
-    ) : /* @__PURE__ */ React86__default.createElement("td", { key: dayIndex })
+    ) : /* @__PURE__ */ React84__default.createElement("td", { key: dayIndex })
   )))));
 }
 function CalendarNavigationButton({
@@ -2975,7 +2956,7 @@ function CalendarNavigationButton({
 }) {
   const ref = useRef(null);
   const { buttonProps } = useButton(rest, ref);
-  return /* @__PURE__ */ React86__default.createElement(
+  return /* @__PURE__ */ React84__default.createElement(
     IconButton,
     {
       ...buttonProps,
@@ -3009,7 +2990,7 @@ function CalendarHeader({
   );
   const areAllOtherYearsDisabled = isPreviousYearDisabled && isNextYearDisabled;
   const isYearPickerVisible = showYearNavigation && !areAllOtherYearsDisabled;
-  return /* @__PURE__ */ React86__default.createElement(Flex, { alignItems: "center", paddingBottom: "4", justifyContent: "space-between" }, /* @__PURE__ */ React86__default.createElement(
+  return /* @__PURE__ */ React84__default.createElement(Flex, { alignItems: "center", paddingBottom: "4", justifyContent: "space-between" }, /* @__PURE__ */ React84__default.createElement(
     CalendarNavigator,
     {
       title: title ? title : isYearPickerVisible ? monthTitle : monthAndYearTitle,
@@ -3019,7 +3000,7 @@ function CalendarHeader({
       isNextDisabled: !state2.isPreviousVisibleRangeInvalid,
       isPreviousDisabled: !state2.isNextVisibleRangeInvalid
     }
-  ), isYearPickerVisible && /* @__PURE__ */ React86__default.createElement(
+  ), isYearPickerVisible && /* @__PURE__ */ React84__default.createElement(
     CalendarNavigator,
     {
       title: jsDate.getFullYear().toString(),
@@ -3041,15 +3022,15 @@ var CalendarNavigator = ({
   isNextDisabled
 }) => {
   const { t: t2 } = useTranslation();
-  return /* @__PURE__ */ React86__default.createElement(Flex, { alignItems: "center", flexGrow: 1 }, /* @__PURE__ */ React86__default.createElement(
+  return /* @__PURE__ */ React84__default.createElement(Flex, { alignItems: "center", flexGrow: 1 }, /* @__PURE__ */ React84__default.createElement(
     CalendarNavigationButton,
     {
       onPress: onPrevious,
       isDisabled: isPreviousDisabled,
-      icon: /* @__PURE__ */ React86__default.createElement(ArrowLeftOutline24Icon, null),
+      icon: /* @__PURE__ */ React84__default.createElement(ArrowLeftOutline24Icon, null),
       "aria-label": `${t2(texts12.previous)} ${t2(texts12[unit])}`
     }
-  ), /* @__PURE__ */ React86__default.createElement(
+  ), /* @__PURE__ */ React84__default.createElement(
     Box,
     {
       role: "heading",
@@ -3059,12 +3040,12 @@ var CalendarNavigator = ({
       textAlign: "center"
     },
     capitalize(title)
-  ), /* @__PURE__ */ React86__default.createElement(
+  ), /* @__PURE__ */ React84__default.createElement(
     CalendarNavigationButton,
     {
       onPress: onNext,
       isDisabled: isNextDisabled,
-      icon: /* @__PURE__ */ React86__default.createElement(ArrowRightOutline24Icon, null),
+      icon: /* @__PURE__ */ React84__default.createElement(ArrowRightOutline24Icon, null),
       "aria-label": `${t2(texts12.next)} ${t2(texts12[unit])}`
     }
   ));
@@ -3112,7 +3093,7 @@ function Calendar({
   const { calendarProps } = useCalendar(props, state2);
   const calendarAriaLabel = calendarProps["aria-label"];
   const ariaLabel = t2(texts13.calendar) + (calendarAriaLabel ? ` ${calendarAriaLabel}` : "");
-  return /* @__PURE__ */ React86__default.createElement(Box, { ...calendarProps, "aria-label": ariaLabel }, /* @__PURE__ */ React86__default.createElement(CalendarHeader, { state: state2, showYearNavigation }), /* @__PURE__ */ React86__default.createElement(CalendarGrid, { variant, state: state2 }));
+  return /* @__PURE__ */ React84__default.createElement(Box, { ...calendarProps, "aria-label": ariaLabel }, /* @__PURE__ */ React84__default.createElement(CalendarHeader, { state: state2, showYearNavigation }), /* @__PURE__ */ React84__default.createElement(CalendarGrid, { variant, state: state2 }));
 }
 var texts13 = createTexts({
   calendar: {
@@ -3123,28 +3104,30 @@ var texts13 = createTexts({
   }
 });
 var CalendarTriggerButton = forwardRef(
-  ({ variant, ...buttonProps }, ref) => {
+  ({ variant, isDisabled, ariaLabelledby, ...buttonProps }, ref) => {
     const { t: t2 } = useTranslation();
     const styles3 = useMultiStyleConfig("Datepicker", { variant });
     const { onPress, ...filteredButtonProps } = buttonProps;
-    const handleOnPress = (event) => {
-      if (onPress) {
-        if (event.key == "Enter" || event.key == " ")
-          onPress(event);
+    const handleCommand = (event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        onPress == null ? void 0 : onPress(event);
       }
     };
-    return /* @__PURE__ */ React86__default.createElement(PopoverAnchor, null, /* @__PURE__ */ React86__default.createElement(
-      Box,
+    return /* @__PURE__ */ React84__default.createElement(PopoverAnchor, null, /* @__PURE__ */ React84__default.createElement(
+      IconButton,
       {
         ref,
-        as: "button",
-        type: "button",
+        role: "button",
+        icon: /* @__PURE__ */ React84__default.createElement(CalendarOutline24Icon, null),
         "aria-label": t2(texts14.openCalendar),
         sx: styles3.calendarTriggerButton,
+        variant: "ghost",
         ...filteredButtonProps,
-        onKeyUp: handleOnPress
-      },
-      /* @__PURE__ */ React86__default.createElement(CalendarOutline24Icon, null)
+        isDisabled,
+        onKeyDown: handleCommand,
+        "aria-labelledby": ariaLabelledby
+      }
     ));
   }
 );
@@ -3157,7 +3140,7 @@ var texts14 = createTexts({
   }
 });
 var DateTimeSegment = forwardRef$1(
-  ({ segment, state: state2 }, externalRef) => {
+  ({ segment, state: state2, ariaLabel, ariaDescription }, externalRef) => {
     const internalRef = useRef(null);
     const ref = externalRef ?? internalRef;
     const { segmentProps } = useDateSegment(
@@ -3169,7 +3152,7 @@ var DateTimeSegment = forwardRef$1(
       isPlaceholder: segment.isPlaceholder,
       isEditable: segment.isEditable
     });
-    return /* @__PURE__ */ React86__default.createElement(
+    return /* @__PURE__ */ React84__default.createElement(
       Box,
       {
         ...segmentProps,
@@ -3182,7 +3165,9 @@ var DateTimeSegment = forwardRef$1(
         outline: "none",
         borderRadius: "xs",
         fontSize: ["mobile.sm", "desktop.sm"],
-        sx: styles3.dateTimeSegment
+        sx: styles3.dateTimeSegment,
+        "aria-description": ariaDescription,
+        "aria-labelledby": ariaLabel
       },
       isPaddable(segment.type) ? segment.text.padStart(2, "0") : segment.text
     );
@@ -3200,7 +3185,7 @@ function createCalendar2(identifier) {
   }
 }
 var DateField = forwardRef$1(
-  (props, externalRef) => {
+  ({ labelId, ...props }, externalRef) => {
     var _a6;
     const locale = useCurrentLocale();
     const styles3 = useMultiStyleConfig("Datepicker", {});
@@ -3209,24 +3194,33 @@ var DateField = forwardRef$1(
       locale,
       createCalendar: createCalendar2
     });
+    const { t: t2 } = useTranslation();
     const internalRef = useRef(null);
     const ref = externalRef ?? internalRef;
-    const { fieldProps, labelProps } = useDateField(
+    const { fieldProps } = useDateField(
       props,
       state2,
       ref
     );
-    return /* @__PURE__ */ React86__default.createElement(Box, { minWidth: "6rem", width: "100%" }, props.label && /* @__PURE__ */ React86__default.createElement(
+    return /* @__PURE__ */ React84__default.createElement(Box, { minWidth: "6rem", width: "100%" }, props.label && /* @__PURE__ */ React84__default.createElement(
       FormLabel$1,
       {
-        ...props.labelProps,
-        ...labelProps,
         sx: styles3.inputLabel,
         position: "absolute",
-        paddingTop: "2px"
+        paddingTop: "2px",
+        id: labelId
       },
       props.label
-    ), /* @__PURE__ */ React86__default.createElement(Flex, { ...fieldProps, ref, paddingTop: "3", paddingBottom: "0.5" }, state2.segments.map((segment, i) => /* @__PURE__ */ React86__default.createElement(DateTimeSegment, { key: i, segment, state: state2 }))), /* @__PURE__ */ React86__default.createElement(
+    ), /* @__PURE__ */ React84__default.createElement(Flex, { ...fieldProps, ref, paddingTop: "3", paddingBottom: "0.5" }, state2.segments.map((segment, i) => /* @__PURE__ */ React84__default.createElement(
+      DateTimeSegment,
+      {
+        key: i,
+        segment,
+        ariaDescription: t2(getAriaLabel(segment.type)),
+        ariaLabel: labelId,
+        state: state2
+      }
+    ))), /* @__PURE__ */ React84__default.createElement(
       "input",
       {
         type: "hidden",
@@ -3236,19 +3230,53 @@ var DateField = forwardRef$1(
     ));
   }
 );
+var texts15 = createTexts({
+  day: {
+    nb: "Velg dag",
+    nn: "Vel dag",
+    sv: "V\xE4lj dag",
+    en: "Choose day"
+  },
+  month: {
+    nb: "Velg m\xE5ned",
+    nn: "Vel m\xE5nad",
+    sv: "V\xE4lj m\xE5nad",
+    en: "Choose month"
+  },
+  year: {
+    nb: "Velg \xE5r",
+    nn: "Vel \xE5r",
+    sv: "V\xE4lj \xE5r",
+    en: "Choose year"
+  }
+});
+var getAriaLabel = (segmentType) => {
+  switch (segmentType) {
+    case "day":
+      return texts15.day;
+    case "month":
+      return texts15.month;
+    case "year":
+      return texts15.year;
+    default:
+      return texts15.day;
+  }
+};
 var StyledField = forwardRef(
-  ({ children, variant, ...otherProps }, ref) => {
+  ({ children, variant, isDisabled, ariaLabelledby, ...otherProps }, ref) => {
     const { isInvalid } = useFormControlContext() ?? {
       isInvalid: false
     };
     const styles3 = useMultiStyleConfig("Datepicker", { variant });
-    return /* @__PURE__ */ React86__default.createElement(
+    return /* @__PURE__ */ React84__default.createElement(
       Box,
       {
         ...otherProps,
         __css: styles3.wrapper,
         ref,
-        "aria-invalid": isInvalid
+        "aria-invalid": isInvalid,
+        "aria-disabled": isDisabled,
+        "aria-labelledby": ariaLabelledby
       },
       children
     );
@@ -3277,7 +3305,6 @@ var DatePicker = forwardRef$1(
     const internalRef = useRef(null);
     const ref = externalRef ?? internalRef;
     const {
-      groupProps,
       labelProps,
       fieldProps,
       buttonProps,
@@ -3289,12 +3316,14 @@ var DatePicker = forwardRef$1(
       state2,
       ref
     );
+    const labelId = `label-${useId()}`;
+    const inputGroupId = `input-group-${useId()}`;
     const styles3 = useMultiStyleConfig("Datepicker", { variant });
     const locale = useCurrentLocale();
     const onFieldClick = () => {
       state2.setOpen(true);
     };
-    const popoverContent = /* @__PURE__ */ React86__default.createElement(PopoverContent, { color: "darkGrey", sx: styles3.calendarPopover }, /* @__PURE__ */ React86__default.createElement(PopoverArrow, { sx: styles3.arrow }), /* @__PURE__ */ React86__default.createElement(PopoverBody, null, /* @__PURE__ */ React86__default.createElement(FocusLock, null, /* @__PURE__ */ React86__default.createElement(
+    const popoverContent = /* @__PURE__ */ React84__default.createElement(PopoverContent, { color: "darkGrey", sx: styles3.calendarPopover }, /* @__PURE__ */ React84__default.createElement(PopoverArrow, { sx: styles3.arrow }), /* @__PURE__ */ React84__default.createElement(PopoverBody, null, /* @__PURE__ */ React84__default.createElement(FocusLock, null, /* @__PURE__ */ React84__default.createElement(
       Calendar,
       {
         ...calendarProps,
@@ -3302,7 +3331,7 @@ var DatePicker = forwardRef$1(
         showYearNavigation
       }
     ))));
-    return /* @__PURE__ */ React86__default.createElement(I18nProvider, { locale }, /* @__PURE__ */ React86__default.createElement(
+    return /* @__PURE__ */ React84__default.createElement(I18nProvider, { locale }, /* @__PURE__ */ React84__default.createElement(
       Box,
       {
         position: "relative",
@@ -3310,7 +3339,7 @@ var DatePicker = forwardRef$1(
         flexDirection: "column",
         width
       },
-      /* @__PURE__ */ React86__default.createElement(
+      /* @__PURE__ */ React84__default.createElement(
         Popover$1,
         {
           ...dialogProps,
@@ -3319,34 +3348,47 @@ var DatePicker = forwardRef$1(
           onClose: state2.close,
           flip: false
         },
-        /* @__PURE__ */ React86__default.createElement(InputGroup, { ...groupProps, display: "inline-flex" }, /* @__PURE__ */ React86__default.createElement(PopoverAnchor, null, /* @__PURE__ */ React86__default.createElement(
-          StyledField,
+        /* @__PURE__ */ React84__default.createElement(
+          InputGroup,
           {
-            variant,
-            onClick: onFieldClick,
-            paddingX: 3,
-            minHeight
+            display: "inline-flex",
+            id: inputGroupId,
+            "aria-labelledby": labelId
           },
-          /* @__PURE__ */ React86__default.createElement(PopoverTrigger, null, /* @__PURE__ */ React86__default.createElement(
-            CalendarTriggerButton,
+          /* @__PURE__ */ React84__default.createElement(PopoverAnchor, null, /* @__PURE__ */ React84__default.createElement(
+            StyledField,
             {
               variant,
-              ref,
-              ...buttonProps
-            }
-          )),
-          /* @__PURE__ */ React86__default.createElement(
-            DateField,
-            {
-              label: props.label,
-              labelProps,
-              name: props.name,
-              ...fieldProps
-            }
-          )
-        ))),
-        /* @__PURE__ */ React86__default.createElement(FormErrorMessage, { ...errorMessageProps }, errorMessage),
-        state2.isOpen && !props.isDisabled && withPortal && /* @__PURE__ */ React86__default.createElement(Portal, null, popoverContent),
+              onClick: onFieldClick,
+              paddingX: 3,
+              minHeight,
+              isDisabled: props.isDisabled,
+              ariaLabelledby: labelId
+            },
+            /* @__PURE__ */ React84__default.createElement(PopoverTrigger, null, /* @__PURE__ */ React84__default.createElement(
+              CalendarTriggerButton,
+              {
+                variant,
+                ref,
+                isDisabled: props.isDisabled,
+                ariaLabelledby: labelId,
+                ...buttonProps
+              }
+            )),
+            /* @__PURE__ */ React84__default.createElement(
+              DateField,
+              {
+                label: props.label,
+                labelProps,
+                labelId,
+                name: props.name,
+                ...fieldProps
+              }
+            )
+          ))
+        ),
+        /* @__PURE__ */ React84__default.createElement(FormErrorMessage, { ...errorMessageProps }, errorMessage),
+        state2.isOpen && !props.isDisabled && withPortal && /* @__PURE__ */ React84__default.createElement(Portal, null, popoverContent),
         state2.isOpen && !props.isDisabled && !withPortal && popoverContent
       )
     ));
@@ -3362,7 +3404,7 @@ function RangeCalendar(props) {
   });
   const ref = useRef(null);
   const { calendarProps, title } = useRangeCalendar(props, state2, ref);
-  return /* @__PURE__ */ React86__default.createElement(Box, { ...calendarProps, ref }, /* @__PURE__ */ React86__default.createElement(CalendarHeader, { state: state2, title }), /* @__PURE__ */ React86__default.createElement(Box, { display: "flex", gap: "8" }, /* @__PURE__ */ React86__default.createElement(CalendarGrid, { variant: props.variant, state: state2 }), /* @__PURE__ */ React86__default.createElement(
+  return /* @__PURE__ */ React84__default.createElement(Box, { ...calendarProps, ref }, /* @__PURE__ */ React84__default.createElement(CalendarHeader, { state: state2, title }), /* @__PURE__ */ React84__default.createElement(Box, { display: "flex", gap: "8" }, /* @__PURE__ */ React84__default.createElement(CalendarGrid, { variant: props.variant, state: state2 }), /* @__PURE__ */ React84__default.createElement(
     CalendarGrid,
     {
       variant: props.variant,
@@ -3409,8 +3451,8 @@ function DateRangePicker({
   const onFieldClick = () => {
     state2.setOpen(true);
   };
-  const popoverContent = /* @__PURE__ */ React86__default.createElement(PopoverContent, { sx: styles3.calendarPopover, maxWidth: "none" }, /* @__PURE__ */ React86__default.createElement(PopoverArrow, { sx: styles3.arrow }), /* @__PURE__ */ React86__default.createElement(PopoverBody, null, /* @__PURE__ */ React86__default.createElement(FocusLock, null, /* @__PURE__ */ React86__default.createElement(RangeCalendar, { variant: "base", ...calendarProps }))));
-  return /* @__PURE__ */ React86__default.createElement(I18nProvider, { locale }, /* @__PURE__ */ React86__default.createElement(Box, { position: "relative", display: "inline-flex", flexDirection: "column" }, props.label && /* @__PURE__ */ React86__default.createElement(FormLabel$1, { ...labelProps, sx: styles3.inputLabel }, props.label), /* @__PURE__ */ React86__default.createElement(
+  const popoverContent = /* @__PURE__ */ React84__default.createElement(PopoverContent, { sx: styles3.calendarPopover, maxWidth: "none" }, /* @__PURE__ */ React84__default.createElement(PopoverArrow, { sx: styles3.arrow }), /* @__PURE__ */ React84__default.createElement(PopoverBody, null, /* @__PURE__ */ React84__default.createElement(FocusLock, null, /* @__PURE__ */ React84__default.createElement(RangeCalendar, { variant: "base", ...calendarProps }))));
+  return /* @__PURE__ */ React84__default.createElement(I18nProvider, { locale }, /* @__PURE__ */ React84__default.createElement(Box, { position: "relative", display: "inline-flex", flexDirection: "column" }, props.label && /* @__PURE__ */ React84__default.createElement(FormLabel$1, { ...labelProps, sx: styles3.inputLabel }, props.label), /* @__PURE__ */ React84__default.createElement(
     Popover$1,
     {
       ...dialogProps,
@@ -3419,7 +3461,7 @@ function DateRangePicker({
       onClose: state2.close,
       flip: false
     },
-    /* @__PURE__ */ React86__default.createElement(InputGroup, { ...groupProps, width: "auto", display: "inline-flex" }, /* @__PURE__ */ React86__default.createElement(PopoverAnchor, null, /* @__PURE__ */ React86__default.createElement(
+    /* @__PURE__ */ React84__default.createElement(InputGroup, { ...groupProps, width: "auto", display: "inline-flex" }, /* @__PURE__ */ React84__default.createElement(PopoverAnchor, null, /* @__PURE__ */ React84__default.createElement(
       StyledField,
       {
         alignItems: "center",
@@ -3429,7 +3471,7 @@ function DateRangePicker({
         onKeyPress: handleEnterClick,
         minHeight
       },
-      variant && /* @__PURE__ */ React86__default.createElement(PopoverTrigger, null, /* @__PURE__ */ React86__default.createElement(
+      variant && /* @__PURE__ */ React84__default.createElement(PopoverTrigger, null, /* @__PURE__ */ React84__default.createElement(
         CalendarTriggerButton,
         {
           paddingLeft: 1,
@@ -3439,7 +3481,7 @@ function DateRangePicker({
           ...buttonProps
         }
       )),
-      /* @__PURE__ */ React86__default.createElement(
+      /* @__PURE__ */ React84__default.createElement(
         DateField,
         {
           ...startFieldProps,
@@ -3448,8 +3490,8 @@ function DateRangePicker({
           labelProps
         }
       ),
-      /* @__PURE__ */ React86__default.createElement(Box, { as: "span", "aria-hidden": "true", paddingRight: "2" }, "\u2013"),
-      /* @__PURE__ */ React86__default.createElement(
+      /* @__PURE__ */ React84__default.createElement(Box, { as: "span", "aria-hidden": "true", paddingRight: "2" }, "\u2013"),
+      /* @__PURE__ */ React84__default.createElement(
         DateField,
         {
           ...endFieldProps,
@@ -3459,14 +3501,14 @@ function DateRangePicker({
         }
       )
     ))),
-    state2.isOpen && withPortal && /* @__PURE__ */ React86__default.createElement(Portal, null, popoverContent),
+    state2.isOpen && withPortal && /* @__PURE__ */ React84__default.createElement(Portal, null, popoverContent),
     state2.isOpen && !withPortal && popoverContent
   )));
 }
 var TimeField = ({ state: state2, ...props }) => {
   const ref = useRef(null);
   const { labelProps, fieldProps } = useTimeField(props, state2, ref);
-  return /* @__PURE__ */ React86__default.createElement(Box, null, /* @__PURE__ */ React86__default.createElement(
+  return /* @__PURE__ */ React84__default.createElement(Box, null, /* @__PURE__ */ React84__default.createElement(
     FormLabel,
     {
       ...labelProps,
@@ -3478,7 +3520,7 @@ var TimeField = ({ state: state2, ...props }) => {
       paddingTop: "2px"
     },
     props.label
-  ), /* @__PURE__ */ React86__default.createElement(Flex, { ...fieldProps, ref, paddingTop: "3", paddingBottom: "0.5" }, state2.segments.map((segment) => /* @__PURE__ */ React86__default.createElement(DateTimeSegment, { key: segment.type, segment, state: state2 }))), /* @__PURE__ */ React86__default.createElement(
+  ), /* @__PURE__ */ React84__default.createElement(Flex, { ...fieldProps, ref, paddingTop: "3", paddingBottom: "0.5" }, state2.segments.map((segment) => /* @__PURE__ */ React84__default.createElement(DateTimeSegment, { key: segment.type, segment, state: state2 }))), /* @__PURE__ */ React84__default.createElement(
     "input",
     {
       type: "hidden",
@@ -3504,7 +3546,7 @@ var TimePicker = ({
   const isDisabled = isDisabledExternally ?? isFormControlDisabled ?? false;
   const { t: t2 } = useTranslation();
   const locale = useCurrentLocale();
-  const label = externalLabel ?? t2(texts15.time);
+  const label = externalLabel ?? t2(texts16.time);
   const state2 = useTimeFieldState({
     value,
     defaultValue,
@@ -3537,17 +3579,17 @@ var TimePicker = ({
       })
     );
   };
-  const backwardsLabel = `${t2(texts15.backwards)} ${minuteInterval} ${t2(
-    texts15.minutes
+  const backwardsLabel = `${t2(texts16.backwards)} ${minuteInterval} ${t2(
+    texts16.minutes
   )}`;
-  const forwardsLabel = `${t2(texts15.forwards)} ${minuteInterval} ${t2(
-    texts15.minutes
+  const forwardsLabel = `${t2(texts16.forwards)} ${minuteInterval} ${t2(
+    texts16.minutes
   )}`;
-  const inputLabel = label ?? t2(texts15.time);
+  const inputLabel = label ?? t2(texts16.time);
   const ariaLabel = `${inputLabel} \u2013 ${t2(
-    texts15.selectedTimeIs(`${(dateTime == null ? void 0 : dateTime.hour) ?? 0} ${(dateTime == null ? void 0 : dateTime.minute) ?? 0}`)
+    texts16.selectedTimeIs(`${(dateTime == null ? void 0 : dateTime.hour) ?? 0} ${(dateTime == null ? void 0 : dateTime.minute) ?? 0}`)
   )}`;
-  return /* @__PURE__ */ React86__default.createElement(
+  return /* @__PURE__ */ React84__default.createElement(
     StyledField,
     {
       variant: "base",
@@ -3563,7 +3605,7 @@ var TimePicker = ({
       "aria-label": ariaLabel,
       ...boxProps
     },
-    /* @__PURE__ */ React86__default.createElement(
+    /* @__PURE__ */ React84__default.createElement(
       IconButton,
       {
         variant: "ghost",
@@ -3571,14 +3613,14 @@ var TimePicker = ({
         borderRadius: "xs",
         "aria-label": backwardsLabel,
         title: backwardsLabel,
-        icon: /* @__PURE__ */ React86__default.createElement(DropdownLeftFill18Icon, null),
+        icon: /* @__PURE__ */ React84__default.createElement(DropdownLeftFill18Icon, null),
         onClick: handleBackwardsClick,
         isDisabled,
         style: isDisabled ? { backgroundColor: "transparent" } : {}
       }
     ),
-    /* @__PURE__ */ React86__default.createElement(TimeField, { label, state: state2, name }),
-    /* @__PURE__ */ React86__default.createElement(
+    /* @__PURE__ */ React84__default.createElement(TimeField, { label, state: state2, name }),
+    /* @__PURE__ */ React84__default.createElement(
       IconButton,
       {
         variant: "ghost",
@@ -3586,7 +3628,7 @@ var TimePicker = ({
         borderRadius: "xs",
         "aria-label": forwardsLabel,
         title: forwardsLabel,
-        icon: /* @__PURE__ */ React86__default.createElement(DropdownRightFill18Icon, null),
+        icon: /* @__PURE__ */ React84__default.createElement(DropdownRightFill18Icon, null),
         onClick: handleForwardClick,
         isDisabled,
         style: isDisabled ? { backgroundColor: "transparent" } : {}
@@ -3594,7 +3636,7 @@ var TimePicker = ({
     )
   );
 };
-var texts15 = createTexts({
+var texts16 = createTexts({
   selectedTimeIs: (time) => ({
     nb: `Valgt tidspunkt er ${time}`,
     nn: `Valt tidspunkt er ${time}`,
@@ -3688,7 +3730,7 @@ var LineIcon = ({
   if (!Icon) {
     return null;
   }
-  return /* @__PURE__ */ React86__default.createElement(Box, { sx: { ...styles3.iconContainer, ...sx }, ...rest }, /* @__PURE__ */ React86__default.createElement(Icon, { sx: styles3.icon }));
+  return /* @__PURE__ */ React84__default.createElement(Box, { sx: { ...styles3.iconContainer, ...sx } }, /* @__PURE__ */ React84__default.createElement(Icon, { sx: styles3.icon }));
 };
 
 // src/linjetag/InfoTag.tsx
@@ -3704,7 +3746,7 @@ var InfoTag = ({
     size: size2,
     ...customProps
   });
-  return /* @__PURE__ */ React86__default.createElement(Box, { sx: styles3.container }, /* @__PURE__ */ React86__default.createElement(
+  return /* @__PURE__ */ React84__default.createElement(Box, { sx: styles3.container }, /* @__PURE__ */ React84__default.createElement(
     LineIcon,
     {
       variant,
@@ -3712,7 +3754,7 @@ var InfoTag = ({
       sx: styles3.iconContainer,
       ...customProps
     }
-  ), /* @__PURE__ */ React86__default.createElement(Box, { sx: styles3.textContainer }, title && /* @__PURE__ */ React86__default.createElement(Box, { as: "span", sx: styles3.title }, title), title && description && " ", description && /* @__PURE__ */ React86__default.createElement(Box, { as: "span", sx: styles3.description }, description)));
+  ), /* @__PURE__ */ React84__default.createElement(Box, { sx: styles3.textContainer }, title && /* @__PURE__ */ React84__default.createElement(Box, { as: "span", sx: styles3.title }, title), title && description && " ", description && /* @__PURE__ */ React84__default.createElement(Box, { as: "span", sx: styles3.description }, description)));
 };
 var TravelTag = forwardRef(
   ({
@@ -3722,25 +3764,31 @@ var TravelTag = forwardRef(
     title,
     description,
     isDisabled,
+    foregroundColor,
+    backgroundColor,
+    customIconVariant,
     ...rest
   }, ref) => {
     const styles3 = useMultiStyleConfig("TravelTag", {
       variant,
       size: size2,
       deviationLevel,
-      foregroundColor: variant === "custom" ? rest.foregroundColor : void 0,
-      backgroundColor: variant === "custom" ? rest.backgroundColor : void 0
+      foregroundColor: variant === "custom" ? foregroundColor : void 0,
+      backgroundColor: variant === "custom" ? backgroundColor : void 0
     });
     const DeviationLevelIcon = getDeviationLevelIcon({ deviationLevel, size: size2 });
-    return /* @__PURE__ */ React86__default.createElement(Box, { sx: styles3.container, "aria-disabled": isDisabled, ref, ...rest }, /* @__PURE__ */ React86__default.createElement(
+    return /* @__PURE__ */ React84__default.createElement(Box, { sx: styles3.container, "aria-disabled": isDisabled, ref, ...rest }, /* @__PURE__ */ React84__default.createElement(
       LineIcon,
       {
         variant,
         size: size2,
         sx: styles3.iconContainer,
+        foregroundColor,
+        backgroundColor,
+        customIconVariant,
         ...rest
       }
-    ), /* @__PURE__ */ React86__default.createElement(Box, { sx: styles3.textContainer }, title && /* @__PURE__ */ React86__default.createElement(Box, { as: "span", sx: styles3.title }, title), title && description && " ", description && /* @__PURE__ */ React86__default.createElement(Box, { as: "span", sx: styles3.description }, description)), DeviationLevelIcon && /* @__PURE__ */ React86__default.createElement(DeviationLevelIcon, { sx: styles3.deviationIcon }));
+    ), /* @__PURE__ */ React84__default.createElement(Box, { sx: styles3.textContainer }, title && /* @__PURE__ */ React84__default.createElement(Box, { as: "span", sx: styles3.title }, title), title && description && " ", description && /* @__PURE__ */ React84__default.createElement(Box, { as: "span", sx: styles3.description }, description)), DeviationLevelIcon && /* @__PURE__ */ React84__default.createElement(DeviationLevelIcon, { sx: styles3.deviationIcon }));
   }
 );
 var getDeviationLevelIcon = ({
@@ -3764,16 +3812,16 @@ var TextLink = forwardRef(
     var _a6;
     const { t: t2 } = useTranslation();
     const isExternal = props.isExternal !== void 0 ? props.isExternal : Boolean((_a6 = props.href) == null ? void 0 : _a6.match(/^https?:\/\//));
-    return /* @__PURE__ */ React86__default.createElement(Link, { ...props, ref, isExternal }, children, isExternal && /* @__PURE__ */ React86__default.createElement(
+    return /* @__PURE__ */ React84__default.createElement(Link, { ...props, ref, isExternal }, children, isExternal && /* @__PURE__ */ React84__default.createElement(
       LinkOutOutline24Icon,
       {
         marginLeft: 0.5,
-        "aria-label": t2(texts16.externalLink)
+        "aria-label": t2(texts17.externalLink)
       }
     ));
   }
 );
-var texts16 = createTexts({
+var texts17 = createTexts({
   externalLink: {
     nb: "Ekstern lenke",
     nn: "Ekstern lenke",
@@ -3785,7 +3833,7 @@ var VyLogo = ({ colorScheme, ...boxProps }) => {
   const mainColor = colorScheme === "light" ? "#1d211c" : "#ffffff";
   const accentColor = colorScheme === "light" ? "#138c6e" : "#ffffff";
   const id = useId();
-  return /* @__PURE__ */ React86__default.createElement(Box, { as: "svg", viewBox: "0 0 107 54", ...boxProps }, /* @__PURE__ */ React86__default.createElement("title", null, "Vy logo"), /* @__PURE__ */ React86__default.createElement(
+  return /* @__PURE__ */ React84__default.createElement(Box, { as: "svg", viewBox: "0 0 107 54", ...boxProps }, /* @__PURE__ */ React84__default.createElement("title", null, "Vy logo"), /* @__PURE__ */ React84__default.createElement(
     "path",
     {
       fillRule: "evenodd",
@@ -3793,7 +3841,7 @@ var VyLogo = ({ colorScheme, ...boxProps }) => {
       d: "M79.97 33.44a.04.04 0 0 0 0-.08 5.76 5.76 0 0 1-2.32-.85c-1.56-1-2.79-2.9-3.83-6.07L68.14 7.16c-1.18-4.04-3.42-5.85-5.48-6.6a8.36 8.36 0 0 0-2.88-.52h-1.44a.04.04 0 0 0 0 .08c.57.09 1.18.24 1.8.5 1.92.8 3.92 2.63 5.06 6.54l5.61 19.07c1.06 3.3 2.31 5.27 3.92 6.3 1.01.64 2.17.9 3.5.9h1.74Z",
       fill: mainColor
     }
-  ), /* @__PURE__ */ React86__default.createElement(
+  ), /* @__PURE__ */ React84__default.createElement(
     "mask",
     {
       id: `${id}-a`,
@@ -3804,7 +3852,7 @@ var VyLogo = ({ colorScheme, ...boxProps }) => {
       width: "94",
       height: "54"
     },
-    /* @__PURE__ */ React86__default.createElement(
+    /* @__PURE__ */ React84__default.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -3813,7 +3861,7 @@ var VyLogo = ({ colorScheme, ...boxProps }) => {
         fill: mainColor
       }
     )
-  ), /* @__PURE__ */ React86__default.createElement(
+  ), /* @__PURE__ */ React84__default.createElement(
     "g",
     {
       mask: `url(#${id}-a)`,
@@ -3821,9 +3869,9 @@ var VyLogo = ({ colorScheme, ...boxProps }) => {
       clipRule: "evenodd",
       fill: mainColor
     },
-    /* @__PURE__ */ React86__default.createElement("path", { d: "M84.57 33.44a.04.04 0 0 0 .01-.08c-2.34-.3-3.85-3.59-4.68-6.38-.88-2.93-4.04-13.63-5.92-19.82C72.08.94 66.2.05 63.54.04a.04.04 0 0 0-.01.08c2.49.34 6.02 1.85 7.55 7.04 1.34 4.55 5.6 19.03 5.76 19.51 1.02 3.03 2.22 4.85 3.73 5.83a6.3 6.3 0 0 0 3.54.94h.46ZM23.28 53.68h-.72c-2.12 0-4.68-1.08-6.09-6.04L3.8 4.37C3.04 1.77 1.93.47.03.15A.04.04 0 0 1 .04.07h1.9c2.54 0 3.92 1.27 4.8 4.3 0 0 11.72 39.78 12.79 43.54.78 2.78 1.7 4.67 3.13 5.43.23.13.42.2.62.26a.04.04 0 0 1 0 .08ZM18.99 5.99C17.77 1.79 15.87.04 12.37.04h-1.71a.04.04 0 0 0 0 .08c2.73.39 4.32 2.19 5.39 5.87 0 0 10.49 35.72 11.85 40.4l1.44-4.87L18.99 6Z" }),
-    /* @__PURE__ */ React86__default.createElement("path", { d: "M24.26 53.68h1.24c1.57 0 2.69-.41 3.52-1.1 1.37-1.1 1.99-2.93 2.56-4.86.09-.29 11.2-37.95 11.59-39.42 1.32-4.97 4.27-7.13 7.43-7.9a12.2 12.2 0 0 1 1.58-.28.04.04 0 0 0 0-.08h-1.4c-4.15 0-8.8 1.65-10.56 8.26-.63 2.38-11.5 39.13-11.58 39.42-.57 1.93-1.23 3.96-2.59 5.07-.56.45-1.06.7-1.8.81a.04.04 0 0 0 0 .08ZM81.3 27.76l6.53-21.78C88.89 2.3 90.49.5 93.23.11a.04.04 0 0 0-.01-.08H91.5c-3.5 0-5.4 1.76-6.62 5.95l-5.05 16.97s1.33 4.46 1.46 4.8Z" })
-  ), /* @__PURE__ */ React86__default.createElement(
+    /* @__PURE__ */ React84__default.createElement("path", { d: "M84.57 33.44a.04.04 0 0 0 .01-.08c-2.34-.3-3.85-3.59-4.68-6.38-.88-2.93-4.04-13.63-5.92-19.82C72.08.94 66.2.05 63.54.04a.04.04 0 0 0-.01.08c2.49.34 6.02 1.85 7.55 7.04 1.34 4.55 5.6 19.03 5.76 19.51 1.02 3.03 2.22 4.85 3.73 5.83a6.3 6.3 0 0 0 3.54.94h.46ZM23.28 53.68h-.72c-2.12 0-4.68-1.08-6.09-6.04L3.8 4.37C3.04 1.77 1.93.47.03.15A.04.04 0 0 1 .04.07h1.9c2.54 0 3.92 1.27 4.8 4.3 0 0 11.72 39.78 12.79 43.54.78 2.78 1.7 4.67 3.13 5.43.23.13.42.2.62.26a.04.04 0 0 1 0 .08ZM18.99 5.99C17.77 1.79 15.87.04 12.37.04h-1.71a.04.04 0 0 0 0 .08c2.73.39 4.32 2.19 5.39 5.87 0 0 10.49 35.72 11.85 40.4l1.44-4.87L18.99 6Z" }),
+    /* @__PURE__ */ React84__default.createElement("path", { d: "M24.26 53.68h1.24c1.57 0 2.69-.41 3.52-1.1 1.37-1.1 1.99-2.93 2.56-4.86.09-.29 11.2-37.95 11.59-39.42 1.32-4.97 4.27-7.13 7.43-7.9a12.2 12.2 0 0 1 1.58-.28.04.04 0 0 0 0-.08h-1.4c-4.15 0-8.8 1.65-10.56 8.26-.63 2.38-11.5 39.13-11.58 39.42-.57 1.93-1.23 3.96-2.59 5.07-.56.45-1.06.7-1.8.81a.04.04 0 0 0 0 .08ZM81.3 27.76l6.53-21.78C88.89 2.3 90.49.5 93.23.11a.04.04 0 0 0-.01-.08H91.5c-3.5 0-5.4 1.76-6.62 5.95l-5.05 16.97s1.33 4.46 1.46 4.8Z" })
+  ), /* @__PURE__ */ React84__default.createElement(
     "path",
     {
       fillRule: "evenodd",
@@ -3831,7 +3879,7 @@ var VyLogo = ({ colorScheme, ...boxProps }) => {
       d: "M98.49.07h-1.82c-2.98 0-4.6 1.49-5.63 5.06l-6.52 21.79a18.22 18.22 0 0 1-1.67 3.96c.57.78 1.17 1.26 1.76 1.38 1.13-.96 2.06-2.75 2.89-5.46l6.49-21.67c.9-3.1 2.23-4.63 4.5-4.98a.04.04 0 0 0 0-.08Z",
       fill: accentColor
     }
-  ), /* @__PURE__ */ React86__default.createElement(
+  ), /* @__PURE__ */ React84__default.createElement(
     "path",
     {
       fillRule: "evenodd",
@@ -3839,7 +3887,7 @@ var VyLogo = ({ colorScheme, ...boxProps }) => {
       d: "M85.25 34.53h-2.93L78.58 46.9c-1.82 6.1 1.05 6.73 2.15 6.73h2.31a.04.04 0 0 0 .01-.09c-1.25-.3-2.96-1.6-1.45-6.64l3.65-12.37ZM102.35.11c.02 0 .03-.02.03-.04a.04.04 0 0 0-.04-.04h-.4c-2.54 0-3.92 1.27-4.8 4.3 0 0-5 16.82-6.57 22.03-1.57 5.2-2.65 6.6-4.78 6.97l-.11.03a.04.04 0 0 0 0 .08h1.45c3.72 0 5.1-2.48 6.41-6.84l7.5-25.07c.19-.6.7-1.23 1.31-1.42Z",
       fill: mainColor
     }
-  ), /* @__PURE__ */ React86__default.createElement(
+  ), /* @__PURE__ */ React84__default.createElement(
     "mask",
     {
       id: `${id}-b`,
@@ -3850,7 +3898,7 @@ var VyLogo = ({ colorScheme, ...boxProps }) => {
       width: "78",
       height: "54"
     },
-    /* @__PURE__ */ React86__default.createElement(
+    /* @__PURE__ */ React84__default.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -3859,25 +3907,25 @@ var VyLogo = ({ colorScheme, ...boxProps }) => {
         fill: mainColor
       }
     )
-  ), /* @__PURE__ */ React86__default.createElement("g", { mask: `url(#${id}-b)`, fillRule: "evenodd", clipRule: "evenodd" }, /* @__PURE__ */ React86__default.createElement(
+  ), /* @__PURE__ */ React84__default.createElement("g", { mask: `url(#${id}-b)`, fillRule: "evenodd", clipRule: "evenodd" }, /* @__PURE__ */ React84__default.createElement(
     "path",
     {
       d: "m88.2 34.45-3.96 13.46c-1.54 5.18.9 5.72 1.83 5.72h2.26a.04.04 0 0 0 0-.09c-1.05-.27-2.44-1.4-1.18-5.63l4.43-15.02c-.7.71-1.88 1.37-3.38 1.56ZM93.71 53.63c.02 0 .04-.02.04-.05a.04.04 0 0 0-.03-.04c-.9-.25-2.02-1.24-.96-4.77 0 0 12.4-42.2 13.08-44.6a3.1 3.1 0 0 0-2.47-4.1c-.02 0-.06-.02-.07.01-.01.04.03.06.04.06.3.16.63.52.45 1.14L89.84 48.77c-1.32 4.4.76 4.86 1.55 4.86h2.32ZM74.1 33.44a.04.04 0 0 0 0-.08 5.77 5.77 0 0 1-2.3-.83c-1.64-1.04-2.9-3.06-3.98-6.5-.1-.29-5.37-18.25-5.55-18.87-1.12-3.8-2.91-5.63-4.68-6.46a7.06 7.06 0 0 0-3.04-.66H53a.04.04 0 0 0-.02.08c.3.05 4.32.17 6.35 7.04 2.03 6.86 4.46 15.07 5.28 17.97 1.77 6.26 4.07 8.3 7.75 8.3h1.73Z",
       fill: mainColor
     }
-  ), /* @__PURE__ */ React86__default.createElement(
+  ), /* @__PURE__ */ React84__default.createElement(
     "path",
     {
       d: "M55.43 2.4c-1.48 1.27-2.7 3.16-3.44 5.9-.07.29-11.08 37.74-11.32 38.55-.93 3.12-1.7 6.21-5.2 6.75a.04.04 0 0 0 0 .08h.7l.6-.01c3.56-.14 5.33-1.66 6.85-6.82L54.94 8.3c.44-1.44.96-3.08 1.7-4.52-.15-.25-.7-.96-1.2-1.38Z",
       fill: mainColor
     }
-  ), /* @__PURE__ */ React86__default.createElement(
+  ), /* @__PURE__ */ React84__default.createElement(
     "path",
     {
       d: "M53.78 1.44a4.64 4.64 0 0 0-4.17.93A10.79 10.79 0 0 0 46.19 8L34.53 47.72c-.58 1.93-1.2 3.75-2.56 4.87-.62.5-1.4.86-2.39 1.01a.04.04 0 0 0 0 .08h1.8c1.57 0 2.69-.41 3.53-1.1 1.36-1.1 1.98-2.93 2.56-4.86L49.05 8.3c.73-2.74 1.95-4.63 3.43-5.9.43-.36.88-.68 1.35-.95l-.05-.01Z",
       fill: accentColor
     }
-  )), /* @__PURE__ */ React86__default.createElement(
+  )), /* @__PURE__ */ React84__default.createElement(
     "path",
     {
       fillRule: "evenodd",
@@ -3898,7 +3946,7 @@ var VyLogoPride = ({ colorScheme, ...boxProps }) => {
   const orangeColor = colorScheme === "light" ? "#F09436" : "#ffffff";
   const yellowColor = colorScheme === "light" ? "#FFFF54" : "#ffffff";
   const id = useId();
-  return /* @__PURE__ */ React86__default.createElement(Box, { as: "svg", viewBox: "0 0 107 54", ...boxProps }, /* @__PURE__ */ React86__default.createElement("title", null, "Vy logo pride"), /* @__PURE__ */ React86__default.createElement(
+  return /* @__PURE__ */ React84__default.createElement(Box, { as: "svg", viewBox: "0 0 107 54", ...boxProps }, /* @__PURE__ */ React84__default.createElement("title", null, "Vy logo pride"), /* @__PURE__ */ React84__default.createElement(
     "svg",
     {
       width: "108",
@@ -3907,7 +3955,7 @@ var VyLogoPride = ({ colorScheme, ...boxProps }) => {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     },
-    /* @__PURE__ */ React86__default.createElement(
+    /* @__PURE__ */ React84__default.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -3916,7 +3964,7 @@ var VyLogoPride = ({ colorScheme, ...boxProps }) => {
         fill: pinkColor
       }
     ),
-    /* @__PURE__ */ React86__default.createElement(
+    /* @__PURE__ */ React84__default.createElement(
       "mask",
       {
         id: `${id}-a-pride`,
@@ -3927,7 +3975,7 @@ var VyLogoPride = ({ colorScheme, ...boxProps }) => {
         width: "95",
         height: "55"
       },
-      /* @__PURE__ */ React86__default.createElement(
+      /* @__PURE__ */ React84__default.createElement(
         "path",
         {
           fillRule: "evenodd",
@@ -3937,7 +3985,7 @@ var VyLogoPride = ({ colorScheme, ...boxProps }) => {
         }
       )
     ),
-    /* @__PURE__ */ React86__default.createElement("g", { mask: `url(#${id}-a-pride)` }, /* @__PURE__ */ React86__default.createElement(
+    /* @__PURE__ */ React84__default.createElement("g", { mask: `url(#${id}-a-pride)` }, /* @__PURE__ */ React84__default.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -3945,7 +3993,7 @@ var VyLogoPride = ({ colorScheme, ...boxProps }) => {
         d: "M86.1392 34.0577C86.1622 34.0577 86.1809 34.0389 86.1809 34.0158C86.1809 33.9951 86.1658 33.9779 86.146 33.9747V33.9745C83.7657 33.6665 82.2265 30.3247 81.3764 27.4799C80.4843 24.4948 77.2629 13.5951 75.3455 7.29056C73.4194 0.957342 67.4267 0.0485861 64.7129 0.0441895H64.7137C64.6906 0.0441895 64.6719 0.0629034 64.6719 0.0859014C64.6719 0.106645 64.6869 0.123893 64.7068 0.127162L64.7067 0.127388C67.2413 0.468862 70.8417 2.00375 72.3953 7.29056C73.7591 11.9308 78.0927 26.6723 78.2592 27.1656C79.2998 30.2466 80.5197 32.1068 82.0639 33.1046C83.1032 33.776 84.2891 34.0577 85.6664 34.0577H86.1392",
         fill: purpleColor
       }
-    ), /* @__PURE__ */ React86__default.createElement(
+    ), /* @__PURE__ */ React84__default.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -3953,7 +4001,7 @@ var VyLogoPride = ({ colorScheme, ...boxProps }) => {
         d: "M23.7089 54.6763C23.4058 54.6763 23.1352 54.6763 22.9803 54.6763C20.8144 54.6763 18.2099 53.5754 16.7766 48.5188L3.8641 4.45414C3.09965 1.80939 1.96226 0.481143 0.0347223 0.151506C0.014881 0.148237 0 0.131101 0 0.110245C0 0.0871344 0.018714 0.0684204 0.0418246 0.0684204H1.98402C4.56565 0.0684204 5.96987 1.36104 6.86386 4.45414C6.86386 4.45414 18.8019 44.9686 19.8869 48.7964C20.6896 51.628 21.628 53.5542 23.0795 54.3328C23.3142 54.4587 23.5119 54.5409 23.7154 54.5932C23.7352 54.5965 23.7506 54.6138 23.7506 54.6345C23.7506 54.6576 23.7319 54.6763 23.7089 54.6763Z",
         fill: darkPurpleColor
       }
-    ), /* @__PURE__ */ React86__default.createElement(
+    ), /* @__PURE__ */ React84__default.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -3961,7 +4009,7 @@ var VyLogoPride = ({ colorScheme, ...boxProps }) => {
         d: "M19.3365 6.09794C18.1013 1.82472 16.1613 0.0390015 12.5947 0.0390015H10.8543C10.8312 0.0390015 10.8125 0.0577155 10.8125 0.0808261C10.8125 0.101569 10.8277 0.118818 10.8476 0.122087V0.121974C13.6341 0.517899 15.2582 2.35232 16.341 6.09794C16.341 6.09794 27.027 42.4871 28.4146 47.2512C28.7189 46.2219 29.2327 44.4828 29.8791 42.2935C28.6038 37.9117 19.3365 6.09794 19.3365 6.09794",
         fill: greenColor
       }
-    ), /* @__PURE__ */ React86__default.createElement(
+    ), /* @__PURE__ */ React84__default.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -3969,7 +4017,7 @@ var VyLogoPride = ({ colorScheme, ...boxProps }) => {
         d: "M24.7059 54.6763H25.9753C27.5661 54.6763 28.7056 54.2553 29.5596 53.5597C30.9494 52.4272 31.5822 50.5663 32.1676 48.6028C32.2552 48.309 43.5646 9.95201 43.9629 8.45455C45.3098 3.39196 48.3208 1.18687 51.5334 0.404941C52.0668 0.275183 52.6055 0.184995 53.1431 0.127162H53.1439C53.1638 0.123893 53.1789 0.106645 53.1789 0.0859014C53.1789 0.0629034 53.1602 0.0441895 53.1371 0.0441895H51.7232C47.4872 0.0441895 42.7565 1.72507 40.9662 8.45455C40.3206 10.8814 29.2585 48.309 29.1709 48.6028C28.5854 50.5663 27.9202 52.6362 26.5303 53.7687C25.9647 54.2295 25.4469 54.4781 24.6995 54.5933H24.699C24.6792 54.5966 24.6641 54.614 24.6641 54.6346C24.6641 54.6577 24.6828 54.6764 24.7059 54.6764V54.6763",
         fill: darkGreenColor
       }
-    ), /* @__PURE__ */ React86__default.createElement(
+    ), /* @__PURE__ */ React84__default.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -3978,7 +4026,7 @@ var VyLogoPride = ({ colorScheme, ...boxProps }) => {
         fill: darkPurpleColor
       }
     )),
-    /* @__PURE__ */ React86__default.createElement(
+    /* @__PURE__ */ React84__default.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -3987,7 +4035,7 @@ var VyLogoPride = ({ colorScheme, ...boxProps }) => {
         fill: blueColor
       }
     ),
-    /* @__PURE__ */ React86__default.createElement(
+    /* @__PURE__ */ React84__default.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -3996,7 +4044,7 @@ var VyLogoPride = ({ colorScheme, ...boxProps }) => {
         fill: blueColor
       }
     ),
-    /* @__PURE__ */ React86__default.createElement(
+    /* @__PURE__ */ React84__default.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -4005,7 +4053,7 @@ var VyLogoPride = ({ colorScheme, ...boxProps }) => {
         fill: greenColor
       }
     ),
-    /* @__PURE__ */ React86__default.createElement(
+    /* @__PURE__ */ React84__default.createElement(
       "mask",
       {
         id: `${id}-b-pride`,
@@ -4016,7 +4064,7 @@ var VyLogoPride = ({ colorScheme, ...boxProps }) => {
         width: "78",
         height: "55"
       },
-      /* @__PURE__ */ React86__default.createElement(
+      /* @__PURE__ */ React84__default.createElement(
         "path",
         {
           fillRule: "evenodd",
@@ -4026,7 +4074,7 @@ var VyLogoPride = ({ colorScheme, ...boxProps }) => {
         }
       )
     ),
-    /* @__PURE__ */ React86__default.createElement("g", { mask: `url(#${id}-b-pride)` }, /* @__PURE__ */ React86__default.createElement(
+    /* @__PURE__ */ React84__default.createElement("g", { mask: `url(#${id}-b-pride)` }, /* @__PURE__ */ React84__default.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -4034,7 +4082,7 @@ var VyLogoPride = ({ colorScheme, ...boxProps }) => {
         d: "M89.8289 35.0891C88.7828 38.6493 85.8015 48.8015 85.8015 48.8015C84.2266 54.076 86.7112 54.6188 87.6599 54.6188H89.9623C89.9855 54.6188 90.0042 54.6001 90.0042 54.577C90.0042 54.5571 89.9903 54.5403 89.9717 54.5362V54.5363C88.8916 54.2553 87.4798 53.0991 88.7632 48.8015C88.7632 48.8015 92.0286 37.7282 93.2719 33.5031C92.561 34.2226 91.3615 34.8917 89.8289 35.0891",
         fill: greenColor
       }
-    ), /* @__PURE__ */ React86__default.createElement(
+    ), /* @__PURE__ */ React84__default.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -4042,7 +4090,7 @@ var VyLogoPride = ({ colorScheme, ...boxProps }) => {
         d: "M95.4467 54.6188C95.4698 54.6188 95.4885 54.6001 95.4885 54.577C95.4885 54.557 95.4747 54.5403 95.4561 54.5362H95.4558C94.5434 54.2765 93.3986 53.2655 94.4728 49.6684C94.4728 49.6684 107.101 6.68958 107.804 4.25563C108.507 1.82169 106.809 0.298979 105.28 0.0692254C105.269 0.0676471 105.219 0.0537807 105.209 0.0862483C105.199 0.118716 105.241 0.138557 105.249 0.143179C105.553 0.303376 105.894 0.672244 105.708 1.30469C105.522 1.93713 91.499 49.6684 91.499 49.6684C90.1586 54.1569 92.273 54.6188 93.0802 54.6188H95.4467",
         fill: darkGreenColor
       }
-    ), /* @__PURE__ */ React86__default.createElement(
+    ), /* @__PURE__ */ React84__default.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -4050,7 +4098,7 @@ var VyLogoPride = ({ colorScheme, ...boxProps }) => {
         d: "M75.4659 34.0577C75.4889 34.0577 75.5076 34.0389 75.5076 34.0158C75.5076 33.9951 75.4925 33.9778 75.4726 33.9746H75.4723C74.6146 33.8501 73.8387 33.5807 73.1306 33.1321C71.4607 32.0744 70.1687 30.0201 69.0737 26.521C68.9798 26.2215 63.6049 7.92165 63.4194 7.29056C62.2821 3.42105 60.4546 1.5616 58.6517 0.708874C57.557 0.191083 56.4715 0.0441895 55.5553 0.0441895C54.9539 0.0441895 54.4151 0.0441895 53.9784 0.0441895H53.9715C53.9484 0.0441895 53.9297 0.0629034 53.9297 0.0859014C53.9297 0.106645 53.9448 0.123893 53.9646 0.127162V0.127275C54.26 0.171918 58.362 0.298745 60.4275 7.29056C62.493 14.2825 64.9683 22.6405 65.8045 25.5908C67.6133 31.9722 69.9469 34.0577 73.6985 34.0577H75.4659",
         fill: redColor
       }
-    ), /* @__PURE__ */ React86__default.createElement(
+    ), /* @__PURE__ */ React84__default.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -4058,7 +4106,7 @@ var VyLogoPride = ({ colorScheme, ...boxProps }) => {
         d: "M56.4576 2.44421C56.4559 2.44568 56.4541 2.44703 56.4524 2.4485C54.944 3.74292 53.6961 5.66449 52.9539 8.45445C52.8754 8.74959 41.6662 46.889 41.4206 47.7167C40.4784 50.8926 39.6893 54.0469 36.1209 54.5932C36.101 54.5965 36.0859 54.6138 36.0859 54.6345C36.0859 54.6576 36.1047 54.6763 36.1278 54.6763H36.8373C36.8373 54.6763 37.3489 54.6683 37.4515 54.6642C41.0756 54.5179 42.8818 52.978 44.4271 47.7167C45.5556 43.8746 55.8691 8.75883 55.9604 8.45445C56.4006 6.98517 56.9293 5.3123 57.6882 3.84641C57.53 3.59208 56.9713 2.87385 56.4576 2.44421",
         fill: orangeColor
       }
-    ), /* @__PURE__ */ React86__default.createElement(
+    ), /* @__PURE__ */ React84__default.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -4067,7 +4115,7 @@ var VyLogoPride = ({ colorScheme, ...boxProps }) => {
         fill: yellowColor
       }
     )),
-    /* @__PURE__ */ React86__default.createElement(
+    /* @__PURE__ */ React84__default.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -4084,109 +4132,109 @@ var CargonetLogo = ({
 }) => {
   const mainColor = "#DF8200";
   const accentColor = colorScheme === "light" ? "#383E42" : "#ffffff";
-  return /* @__PURE__ */ React86__default.createElement(Box, { as: "svg", viewBox: "0 0 251 52", ...boxProps }, /* @__PURE__ */ React86__default.createElement("title", null, "Cargonet logo"), /* @__PURE__ */ React86__default.createElement(
+  return /* @__PURE__ */ React84__default.createElement(Box, { as: "svg", viewBox: "0 0 251 52", ...boxProps }, /* @__PURE__ */ React84__default.createElement("title", null, "Cargonet logo"), /* @__PURE__ */ React84__default.createElement(
     "path",
     {
       d: "M87.9222 14.602L84.3862 18.7417C81.1953 15.9821 79.1685 15.2914 76.5379 15.2914C70.933 15.2914 67.4398 19.5609 67.4398 26.029C67.4398 32.5834 71.0186 36.8523 76.4089 36.8523C79.6855 36.8523 81.6694 35.6447 84.9038 32.9285L88.3969 36.982C84.645 40.5608 81.1524 42.1134 76.4951 42.1134C66.9651 42.1134 61.2733 35.214 61.2733 25.9856C61.2733 16.9732 66.7492 10.0309 76.5379 10.0309C81.2387 10.0309 84.3 11.4533 87.9222 14.602Z",
       fill: accentColor
     }
-  ), /* @__PURE__ */ React86__default.createElement(
+  ), /* @__PURE__ */ React84__default.createElement(
     "path",
     {
       d: "M106.461 41.3802C106.159 40.5604 105.986 39.5259 105.857 38.4046C104.693 40.6038 102.408 42.1131 98.6988 42.1131C94.4299 42.1131 90.8511 40.216 90.8511 35.774C90.8511 30.9013 95.1628 29.1333 100.812 28.1417L105.598 27.3225V26.7187C105.598 24.3903 103.917 23.1399 101.416 23.1399C98.4829 23.1399 96.5858 24.476 94.4734 26.6759L91.0231 23.5712C93.9124 20.2934 97.1468 18.6117 101.373 18.6117C107.754 18.6117 110.946 21.846 110.946 26.5028V35.9037C110.946 38.448 111.118 40.216 111.506 41.3802H106.461ZM105.598 32.6265V31.1607L101.373 31.9364C98.0093 32.5836 96.2414 33.4022 96.2414 35.3861C96.2414 36.9388 97.5346 37.9299 99.8202 37.9299C102.666 37.9299 105.598 36.4647 105.598 32.6265Z",
       fill: accentColor
     }
-  ), /* @__PURE__ */ React86__default.createElement(
+  ), /* @__PURE__ */ React84__default.createElement(
     "path",
     {
       d: "M130.65 19.6469L129.572 24.5625C128.537 24.2614 127.373 24.0455 126.295 24.0455C123.233 24.0455 121.422 26.4601 121.422 30.5565V41.3803H115.816V25.8563C115.816 22.8813 115.644 20.8111 115.385 19.3448H120.603C120.818 20.1645 120.991 21.4578 121.034 23.0967C122.112 20.5524 123.88 18.9569 126.812 18.9569C128.192 18.9569 129.529 19.2157 130.65 19.6469Z",
       fill: accentColor
     }
-  ), /* @__PURE__ */ React86__default.createElement(
+  ), /* @__PURE__ */ React84__default.createElement(
     "path",
     {
       d: "M152.813 19.3447V40.6896C152.813 46.9859 148.156 50.1768 142.075 50.1768C138.669 50.1768 135.219 49.3142 132.028 47.4172L134.745 43.3202C137.289 44.8729 139.532 45.692 141.99 45.692C145.008 45.692 147.336 44.269 147.336 40.3018V37.4993C146.043 39.5255 143.93 40.8199 140.911 40.8199C135.349 40.8199 131.209 36.3779 131.209 29.7373C131.209 23.0966 135.349 18.6118 140.911 18.6118C144.188 18.6118 146.345 20.0782 147.639 22.3631V19.3447H152.813ZM147.509 29.7373C147.509 25.9425 145.267 23.3988 142.162 23.3988C138.971 23.3988 136.858 25.9425 136.858 29.7373C136.858 33.5314 138.971 36.0763 142.162 36.0763C145.267 36.0763 147.509 33.5314 147.509 29.7373Z",
       fill: accentColor
     }
-  ), /* @__PURE__ */ React86__default.createElement(
+  ), /* @__PURE__ */ React84__default.createElement(
     "path",
     {
       d: "M178.72 30.341C178.72 37.3267 173.976 42.0702 167.292 42.0702C160.609 42.0702 155.866 37.3267 155.866 30.341C155.866 23.3553 160.609 18.6117 167.292 18.6117C173.976 18.6117 178.72 23.3553 178.72 30.341ZM161.557 30.341C161.557 34.6967 163.886 37.4992 167.292 37.4992C170.699 37.4992 173.028 34.6967 173.028 30.341C173.028 26.0721 170.699 23.1828 167.292 23.1828C163.886 23.1828 161.557 26.0721 161.557 30.341Z",
       fill: accentColor
     }
-  ), /* @__PURE__ */ React86__default.createElement(
+  ), /* @__PURE__ */ React84__default.createElement(
     "path",
     {
       d: "M208.903 10.7638V41.38H202.478L194.673 28.9612C192.516 25.5115 190.403 22.1046 188.635 18.8274C188.851 22.4497 188.937 26.4598 188.937 30.8155V41.38H183.029V10.7638H189.585L197.82 23.9589C199.717 26.9773 201.616 29.9529 203.21 32.8851C203.081 29.6507 203.038 26.0719 203.038 21.8893V10.7638H208.903Z",
       fill: mainColor
     }
-  ), /* @__PURE__ */ React86__default.createElement(
+  ), /* @__PURE__ */ React84__default.createElement(
     "path",
     {
       d: "M233.663 37.7578C230.386 41.035 227.324 42.0707 223.788 42.0707C216.672 42.0707 212.231 37.499 212.231 30.4705C212.231 23.6573 216.371 18.6116 223.313 18.6116C230.041 18.6116 233.619 22.8376 233.619 29.6079C233.619 30.2546 233.577 31.2897 233.534 31.6781H217.578C218.009 35.0844 220.08 37.499 223.917 37.499C226.505 37.499 228.144 36.5936 230.6 34.4378L233.663 37.7578ZM217.708 27.9262H228.359C228.144 24.8644 226.376 22.881 223.227 22.881C220.123 22.881 218.311 24.8644 217.708 27.9262Z",
       fill: mainColor
     }
-  ), /* @__PURE__ */ React86__default.createElement(
+  ), /* @__PURE__ */ React84__default.createElement(
     "path",
     {
       d: "M250.41 41.0785C248.556 41.6817 246.789 41.8976 245.538 41.8976C240.88 41.8976 239.198 39.8709 239.198 35.7739V23.4415H235.275V19.3445H239.198V12.6182H244.805V19.3445H250.066V23.4415H244.805V34.8257C244.805 36.5937 245.624 37.0244 247.047 37.0244C247.651 37.0244 248.47 36.9387 249.721 36.6365L250.41 41.0785Z",
       fill: mainColor
     }
-  ), /* @__PURE__ */ React86__default.createElement(
+  ), /* @__PURE__ */ React84__default.createElement(
     "path",
     {
       d: "M21.4911 10.2565H31.1579V0.589175H21.4911V10.2565Z",
       fill: mainColor
     }
-  ), /* @__PURE__ */ React86__default.createElement(
+  ), /* @__PURE__ */ React84__default.createElement(
     "path",
     {
       d: "M41.3861 10.8855H31.7757V20.5528H41.3861V10.8855Z",
       fill: mainColor
     }
-  ), /* @__PURE__ */ React86__default.createElement(
+  ), /* @__PURE__ */ React84__default.createElement(
     "path",
     {
       d: "M42.0022 10.2547H51.6126V0.587402H42.0022V10.2547Z",
       fill: mainColor
     }
-  ), /* @__PURE__ */ React86__default.createElement(
+  ), /* @__PURE__ */ React84__default.createElement(
     "path",
     {
       d: "M21.477 30.7758H31.1431V21.1654H21.477V30.7758Z",
       fill: mainColor
     }
-  ), /* @__PURE__ */ React86__default.createElement(
+  ), /* @__PURE__ */ React84__default.createElement(
     "path",
     {
       d: "M11.2124 20.5493H20.8791V10.8826H11.2124V20.5493Z",
       fill: mainColor
     }
-  ), /* @__PURE__ */ React86__default.createElement(
+  ), /* @__PURE__ */ React84__default.createElement(
     "path",
     {
       d: "M0.910156 30.7911H10.5775V21.1801H0.910156V30.7911Z",
       fill: mainColor
     }
-  ), /* @__PURE__ */ React86__default.createElement(
+  ), /* @__PURE__ */ React84__default.createElement(
     "path",
     {
       d: "M11.1948 41.0258H20.8615V31.4154H11.1948V41.0258Z",
       fill: mainColor
     }
-  ), /* @__PURE__ */ React86__default.createElement(
+  ), /* @__PURE__ */ React84__default.createElement(
     "path",
     {
       d: "M31.7669 41.0581H41.4336V31.3908H31.7669V41.0581Z",
       fill: mainColor
     }
-  ), /* @__PURE__ */ React86__default.createElement(
+  ), /* @__PURE__ */ React84__default.createElement(
     "path",
     {
       d: "M21.4776 51.2277H31.1443V41.656H21.4776V51.2277Z",
       fill: mainColor
     }
-  ), /* @__PURE__ */ React86__default.createElement(
+  ), /* @__PURE__ */ React84__default.createElement(
     "path",
     {
       d: "M42.0615 51.2283H51.7282V41.6989H42.0615V51.2283Z",
@@ -4205,19 +4253,19 @@ var JumpButton = ({
     variant: "jumpSkip",
     size: size2
   });
-  return /* @__PURE__ */ React86__default.createElement(
+  return /* @__PURE__ */ React84__default.createElement(
     Center,
     {
       as: "button",
       sx: styles3.container,
-      "aria-label": direction2 === "forward" ? t2(texts17.forward) : t2(texts17.backward),
+      "aria-label": direction2 === "forward" ? t2(texts18.forward) : t2(texts18.backward),
       disabled: isDisabled,
       ...props
     },
-    direction2 === "forward" ? /* @__PURE__ */ React86__default.createElement(Forward15MediaControllerFill30Icon, { sx: styles3.icon }) : /* @__PURE__ */ React86__default.createElement(Backward15MediaControllerFill30Icon, { sx: styles3.icon })
+    direction2 === "forward" ? /* @__PURE__ */ React84__default.createElement(Forward15MediaControllerFill30Icon, { sx: styles3.icon }) : /* @__PURE__ */ React84__default.createElement(Backward15MediaControllerFill30Icon, { sx: styles3.icon })
   );
 };
-var texts17 = createTexts({
+var texts18 = createTexts({
   forward: {
     nb: "15 sekunder frem",
     nn: "15 sekunder fram",
@@ -4242,19 +4290,19 @@ var PlayPauseButton = ({
     variant: "play",
     size: size2
   });
-  return /* @__PURE__ */ React86__default.createElement(
+  return /* @__PURE__ */ React84__default.createElement(
     Center,
     {
       as: "button",
       sx: styles3.container,
-      "aria-label": isPlaying ? t2(texts18.pause) : t2(texts18.play),
+      "aria-label": isPlaying ? t2(texts19.pause) : t2(texts19.play),
       disabled: isDisabled,
       ...props
     },
-    isPlaying ? /* @__PURE__ */ React86__default.createElement(PauseMediaControllerFill24Icon, { sx: styles3.icon }) : /* @__PURE__ */ React86__default.createElement(PlayMediaControllerFill24Icon, { sx: styles3.icon })
+    isPlaying ? /* @__PURE__ */ React84__default.createElement(PauseMediaControllerFill24Icon, { sx: styles3.icon }) : /* @__PURE__ */ React84__default.createElement(PlayMediaControllerFill24Icon, { sx: styles3.icon })
   );
 };
-var texts18 = createTexts({
+var texts19 = createTexts({
   pause: {
     nb: "Pause",
     nn: "Pause",
@@ -4279,19 +4327,19 @@ var SkipButton = ({
     variant: "jumpSkip",
     size: size2
   });
-  return /* @__PURE__ */ React86__default.createElement(
+  return /* @__PURE__ */ React84__default.createElement(
     Center,
     {
       as: "button",
       sx: styles3.container,
-      "aria-label": direction2 === "forward" ? t2(texts19.next) : t2(texts19.previous),
+      "aria-label": direction2 === "forward" ? t2(texts20.next) : t2(texts20.previous),
       disabled: isDisabled,
       ...props
     },
-    direction2 === "forward" ? /* @__PURE__ */ React86__default.createElement(NextMediaControllerFill30Icon, { sx: styles3.icon }) : /* @__PURE__ */ React86__default.createElement(PreviousMediaControllerFill30Icon, { sx: styles3.icon })
+    direction2 === "forward" ? /* @__PURE__ */ React84__default.createElement(NextMediaControllerFill30Icon, { sx: styles3.icon }) : /* @__PURE__ */ React84__default.createElement(PreviousMediaControllerFill30Icon, { sx: styles3.icon })
   );
 };
-var texts19 = createTexts({
+var texts20 = createTexts({
   next: {
     nb: "Neste",
     nn: "Neste",
@@ -4311,13 +4359,13 @@ var ModalHeader = forwardRef(
       fontSize: size2 === "lg" ? ["mobile.lg", "desktop.lg"] : ["mobile.md", "desktop.md"],
       textAlign: size2 === "lg" ? "center" : "left"
     };
-    return /* @__PURE__ */ React86__default.createElement(ModalHeader$1, { ...props, ref, ...styles3 });
+    return /* @__PURE__ */ React84__default.createElement(ModalHeader$1, { ...props, ref, ...styles3 });
   }
 );
 
 // src/modal/Drawer.tsx
 var Drawer = (props) => {
-  return /* @__PURE__ */ React86__default.createElement(DrawerProvider, { placement: props.placement }, /* @__PURE__ */ React86__default.createElement(Drawer$1, { ...props }));
+  return /* @__PURE__ */ React84__default.createElement(DrawerProvider, { placement: props.placement }, /* @__PURE__ */ React84__default.createElement(Drawer$1, { ...props }));
 };
 var DrawerContent = forwardRef(
   ({ children, ...props }, ref) => {
@@ -4334,7 +4382,7 @@ var DrawerContent = forwardRef(
     });
     const isTopOrBottom = placement === "top" || placement === "bottom";
     const widthConstraits = isTopOrBottom ? { width: ["100%", "37.5rem"], mx: "auto" } : {};
-    return /* @__PURE__ */ React86__default.createElement(Box, { ...handlers }, /* @__PURE__ */ React86__default.createElement(
+    return /* @__PURE__ */ React84__default.createElement(Box, { ...handlers }, /* @__PURE__ */ React84__default.createElement(
       DrawerContent$1,
       {
         ...widthConstraits,
@@ -4343,13 +4391,13 @@ var DrawerContent = forwardRef(
         ...props,
         ref
       },
-      /* @__PURE__ */ React86__default.createElement(Box, { position: "relative" }, /* @__PURE__ */ React86__default.createElement(Box, { maxHeight: "100vh", maxWidth: "100vw", overflow: "auto" }, isTopOrBottom && /* @__PURE__ */ React86__default.createElement(Notch, null), /* @__PURE__ */ React86__default.createElement(Box, null, children)))
+      /* @__PURE__ */ React84__default.createElement(Box, { position: "relative" }, /* @__PURE__ */ React84__default.createElement(Box, { maxHeight: "100vh", maxWidth: "100vw", overflow: "auto" }, isTopOrBottom && /* @__PURE__ */ React84__default.createElement(Notch, null), /* @__PURE__ */ React84__default.createElement(Box, null, children)))
     ));
   }
 );
 var Notch = forwardRef((props, ref) => {
   const placement = useDrawerContext();
-  return /* @__PURE__ */ React86__default.createElement(
+  return /* @__PURE__ */ React84__default.createElement(
     Box,
     {
       position: "absolute",
@@ -4361,14 +4409,14 @@ var Notch = forwardRef((props, ref) => {
       ...props,
       ref
     },
-    /* @__PURE__ */ React86__default.createElement(
+    /* @__PURE__ */ React84__default.createElement(
       Center,
       {
         background: placement === "bottom" ? "bottom" : "top",
         padding: 2,
         borderRadius: "md"
       },
-      /* @__PURE__ */ React86__default.createElement(
+      /* @__PURE__ */ React84__default.createElement(
         Box,
         {
           width: "2.265rem",
@@ -4380,17 +4428,17 @@ var Notch = forwardRef((props, ref) => {
     )
   );
 });
-var DrawerContext = React86__default.createContext(void 0);
-var DrawerProvider = (props) => /* @__PURE__ */ React86__default.createElement(DrawerContext.Provider, { value: props.placement }, props.children);
+var DrawerContext = React84__default.createContext(void 0);
+var DrawerProvider = (props) => /* @__PURE__ */ React84__default.createElement(DrawerContext.Provider, { value: props.placement }, props.children);
 var useDrawerContext = () => {
-  return React86__default.useContext(DrawerContext);
+  return React84__default.useContext(DrawerContext);
 };
 var FullScreenDrawer = ({
   children,
   title,
   placement = "bottom",
-  leftButton = /* @__PURE__ */ React86__default.createElement(DrawerBackButton, null),
-  rightButton = /* @__PURE__ */ React86__default.createElement(DrawerCloseButton2, null),
+  leftButton = /* @__PURE__ */ React84__default.createElement(DrawerBackButton, null),
+  rightButton = /* @__PURE__ */ React84__default.createElement(DrawerCloseButton2, null),
   isOpen,
   onClose,
   body
@@ -4407,7 +4455,7 @@ var FullScreenDrawer = ({
   useEffect(() => {
     setContentBoxScrolled(false);
   }, [isOpen]);
-  return /* @__PURE__ */ React86__default.createElement(Drawer, { isOpen, onClose, placement, size: "full" }, /* @__PURE__ */ React86__default.createElement(DrawerOverlay, null), /* @__PURE__ */ React86__default.createElement(
+  return /* @__PURE__ */ React84__default.createElement(Drawer, { isOpen, onClose, placement, size: "full" }, /* @__PURE__ */ React84__default.createElement(DrawerOverlay, null), /* @__PURE__ */ React84__default.createElement(
     DrawerContent$1,
     {
       height: "100vh",
@@ -4415,7 +4463,7 @@ var FullScreenDrawer = ({
       backgroundPosition: "top",
       backgroundRepeat: "no-repeat"
     },
-    /* @__PURE__ */ React86__default.createElement(
+    /* @__PURE__ */ React84__default.createElement(
       DrawerTopMenu,
       {
         isScrolled: isContentBoxScrolled,
@@ -4424,7 +4472,7 @@ var FullScreenDrawer = ({
         rightButton
       }
     ),
-    /* @__PURE__ */ React86__default.createElement(DrawerBody, { overflow: "auto", onScroll: onContentScroll, ...body }, children)
+    /* @__PURE__ */ React84__default.createElement(DrawerBody, { overflow: "auto", onScroll: onContentScroll, ...body }, children)
   ));
 };
 var DrawerTopMenu = ({
@@ -4437,7 +4485,7 @@ var DrawerTopMenu = ({
     "bg.default.light",
     "bg.default.dark"
   );
-  return /* @__PURE__ */ React86__default.createElement(
+  return /* @__PURE__ */ React84__default.createElement(
     Flex,
     {
       width: "100%",
@@ -4450,8 +4498,8 @@ var DrawerTopMenu = ({
       transition: "box-shadow 0.2s",
       boxShadow: isScrolled ? "md" : void 0
     },
-    /* @__PURE__ */ React86__default.createElement(Box, { flex: "1" }, /* @__PURE__ */ React86__default.createElement(Box, { width: "fit-content" }, leftButton)),
-    /* @__PURE__ */ React86__default.createElement(
+    /* @__PURE__ */ React84__default.createElement(Box, { flex: "1" }, /* @__PURE__ */ React84__default.createElement(Box, { width: "fit-content" }, leftButton)),
+    /* @__PURE__ */ React84__default.createElement(
       DrawerHeader,
       {
         as: "h2",
@@ -4464,7 +4512,7 @@ var DrawerTopMenu = ({
       },
       title
     ),
-    /* @__PURE__ */ React86__default.createElement(Box, { flex: "1" }, /* @__PURE__ */ React86__default.createElement(Box, { width: "fit-content", marginLeft: "auto" }, rightButton))
+    /* @__PURE__ */ React84__default.createElement(Box, { flex: "1" }, /* @__PURE__ */ React84__default.createElement(Box, { width: "fit-content", marginLeft: "auto" }, rightButton))
   );
 };
 var DrawerCloseButton2 = () => {
@@ -4474,26 +4522,26 @@ var DrawerCloseButton2 = () => {
     `(min-width: ${tokens11__default.size.breakpoint.sm})`
   );
   if (isScreenSizeMinSm) {
-    return /* @__PURE__ */ React86__default.createElement(
+    return /* @__PURE__ */ React84__default.createElement(
       Button2,
       {
         variant: "ghost",
-        leftIcon: /* @__PURE__ */ React86__default.createElement(CloseFill24Icon, null),
+        leftIcon: /* @__PURE__ */ React84__default.createElement(CloseFill24Icon, null),
         onClick: onClose,
-        "aria-label": t2(texts20.close),
+        "aria-label": t2(texts21.close),
         width: "fit-content",
         marginLeft: "auto"
       },
-      t2(texts20.close)
+      t2(texts21.close)
     );
   }
-  return /* @__PURE__ */ React86__default.createElement(
+  return /* @__PURE__ */ React84__default.createElement(
     IconButton,
     {
       variant: "ghost",
-      icon: /* @__PURE__ */ React86__default.createElement(CloseFill30Icon, null),
+      icon: /* @__PURE__ */ React84__default.createElement(CloseFill30Icon, null),
       onClick: onClose,
-      "aria-label": t2(texts20.close)
+      "aria-label": t2(texts21.close)
     }
   );
 };
@@ -4504,30 +4552,30 @@ var DrawerBackButton = () => {
     `(min-width: ${tokens11__default.size.breakpoint.sm})`
   );
   if (isScreenSizeMinSm) {
-    return /* @__PURE__ */ React86__default.createElement(
+    return /* @__PURE__ */ React84__default.createElement(
       Button2,
       {
         variant: "ghost",
-        leftIcon: /* @__PURE__ */ React86__default.createElement(ArrowLeftFill24Icon, null),
+        leftIcon: /* @__PURE__ */ React84__default.createElement(ArrowLeftFill24Icon, null),
         onClick: onClose,
-        "aria-label": t2(texts20.backAriaLabel),
+        "aria-label": t2(texts21.backAriaLabel),
         width: "fit-content",
         marginLeft: "auto"
       },
-      t2(texts20.back)
+      t2(texts21.back)
     );
   }
-  return /* @__PURE__ */ React86__default.createElement(
+  return /* @__PURE__ */ React84__default.createElement(
     IconButton,
     {
       variant: "ghost",
-      icon: /* @__PURE__ */ React86__default.createElement(ArrowLeftFill30Icon, null),
+      icon: /* @__PURE__ */ React84__default.createElement(ArrowLeftFill30Icon, null),
       onClick: onClose,
-      "aria-label": t2(texts20.close)
+      "aria-label": t2(texts21.close)
     }
   );
 };
-var texts20 = createTexts({
+var texts21 = createTexts({
   close: {
     nb: "Lukk",
     nn: "Lukk",
@@ -4560,7 +4608,7 @@ var SimpleDrawer = ({
   body,
   ...props
 }) => {
-  return /* @__PURE__ */ React86__default.createElement(Drawer, { placement, ...props }, /* @__PURE__ */ React86__default.createElement(DrawerOverlay, null), /* @__PURE__ */ React86__default.createElement(DrawerContent, null, /* @__PURE__ */ React86__default.createElement(DrawerCloseButton, null), title && /* @__PURE__ */ React86__default.createElement(ModalHeader, null, title), /* @__PURE__ */ React86__default.createElement(DrawerBody, { ...body }, children)));
+  return /* @__PURE__ */ React84__default.createElement(Drawer, { placement, ...props }, /* @__PURE__ */ React84__default.createElement(DrawerOverlay, null), /* @__PURE__ */ React84__default.createElement(DrawerContent, null, /* @__PURE__ */ React84__default.createElement(DrawerCloseButton, null), title && /* @__PURE__ */ React84__default.createElement(ModalHeader, null, title), /* @__PURE__ */ React84__default.createElement(DrawerBody, { ...body }, children)));
 };
 var EXPIRATION_DELAY = 1e3 * 60 * 60 * 24 * 30;
 var Nudge = ({
@@ -4582,7 +4630,7 @@ var Nudge = ({
     }
     return null;
   }
-  return /* @__PURE__ */ React86__default.createElement(
+  return /* @__PURE__ */ React84__default.createElement(
     Popover$1,
     {
       arrowSize: 12,
@@ -4590,11 +4638,11 @@ var Nudge = ({
       defaultIsOpen: true,
       ...props
     },
-    /* @__PURE__ */ React86__default.createElement(PopoverAnchor, null, children),
-    /* @__PURE__ */ React86__default.createElement(PopoverContent, { borderRadius: "sm" }, /* @__PURE__ */ React86__default.createElement(DarkMode, null, /* @__PURE__ */ React86__default.createElement(PopoverArrow, null), /* @__PURE__ */ React86__default.createElement(PopoverCloseButton, null), /* @__PURE__ */ React86__default.createElement(PopoverBody, { margin: 1 }, /* @__PURE__ */ React86__default.createElement(Box, { marginRight: 4 }, content), /* @__PURE__ */ React86__default.createElement(Box, { marginTop: 1.5 }, actions ?? /* @__PURE__ */ React86__default.createElement(ButtonGroup, null, /* @__PURE__ */ React86__default.createElement(Button2, { variant: "tertiary", size: "xs" }, t2(texts21.close)), /* @__PURE__ */ React86__default.createElement(Button2, { variant: "secondary", size: "xs", fontWeight: "bold" }, t2(texts21.showMe)))))))
+    /* @__PURE__ */ React84__default.createElement(PopoverAnchor, null, children),
+    /* @__PURE__ */ React84__default.createElement(PopoverContent, { borderRadius: "sm" }, /* @__PURE__ */ React84__default.createElement(DarkMode, null, /* @__PURE__ */ React84__default.createElement(PopoverArrow, null), /* @__PURE__ */ React84__default.createElement(PopoverCloseButton, null), /* @__PURE__ */ React84__default.createElement(PopoverBody, { margin: 1 }, /* @__PURE__ */ React84__default.createElement(Box, { marginRight: 4 }, content), /* @__PURE__ */ React84__default.createElement(Box, { marginTop: 1.5 }, actions ?? /* @__PURE__ */ React84__default.createElement(ButtonGroup, null, /* @__PURE__ */ React84__default.createElement(Button2, { variant: "tertiary", size: "xs" }, t2(texts22.close)), /* @__PURE__ */ React84__default.createElement(Button2, { variant: "secondary", size: "xs", fontWeight: "bold" }, t2(texts22.showMe)))))))
   );
 };
-var texts21 = createTexts({
+var texts22 = createTexts({
   close: {
     nb: "Lukk",
     nn: "Lukk",
@@ -4619,19 +4667,19 @@ var WizardNudge = ({
   const totalSteps = content.length;
   const isLastStep = totalSteps === currentStep;
   const onNext = () => setCurrentStep((prev) => prev + 1);
-  return /* @__PURE__ */ React86__default.createElement(
+  return /* @__PURE__ */ React84__default.createElement(
     Nudge,
     {
       onClose,
       name,
       content: content[currentStep - 1],
-      actions: /* @__PURE__ */ React86__default.createElement(Flex, { gap: 3, alignItems: "center" }, /* @__PURE__ */ React86__default.createElement(
+      actions: /* @__PURE__ */ React84__default.createElement(Flex, { gap: 3, alignItems: "center" }, /* @__PURE__ */ React84__default.createElement(
         ProgressIndicator,
         {
           activeStep: currentStep,
           numberOfSteps: totalSteps
         }
-      ), /* @__PURE__ */ React86__default.createElement(Box, null, /* @__PURE__ */ React86__default.createElement(NextOrCloseButton, { isLastStep, onNext }))),
+      ), /* @__PURE__ */ React84__default.createElement(Box, null, /* @__PURE__ */ React84__default.createElement(NextOrCloseButton, { isLastStep, onNext }))),
       ...props
     },
     children
@@ -4640,19 +4688,19 @@ var WizardNudge = ({
 var NextOrCloseButton = ({ isLastStep, onNext }) => {
   const { onClose } = usePopoverContext();
   const { t: t2 } = useTranslation();
-  return /* @__PURE__ */ React86__default.createElement(
+  return /* @__PURE__ */ React84__default.createElement(
     Button2,
     {
       variant: "tertiary",
       size: "xs",
-      leftIcon: isLastStep ? void 0 : /* @__PURE__ */ React86__default.createElement(ArrowRightFill18Icon, null),
+      leftIcon: isLastStep ? void 0 : /* @__PURE__ */ React84__default.createElement(ArrowRightFill18Icon, null),
       onClick: isLastStep ? onClose : onNext,
       width: "fit-content"
     },
-    t2(isLastStep ? texts22.finish : texts22.nextStep)
+    t2(isLastStep ? texts23.finish : texts23.nextStep)
   );
 };
-var texts22 = createTexts({
+var texts23 = createTexts({
   nextStep: {
     nb: "Neste",
     nn: "Neste",
@@ -4709,7 +4757,7 @@ var Pagination = ({
       }
     }
     return displayPageNumbers.map(
-      (pageNumber, index) => pageNumber === "..." ? /* @__PURE__ */ React86__default.createElement(ListItem, { key: index, sx: style.listItem }, /* @__PURE__ */ React86__default.createElement(Center, null, "...")) : /* @__PURE__ */ React86__default.createElement(
+      (pageNumber, index) => pageNumber === "..." ? /* @__PURE__ */ React84__default.createElement(ListItem, { key: index, sx: style.listItem }, /* @__PURE__ */ React84__default.createElement(Center, null, "...")) : /* @__PURE__ */ React84__default.createElement(
         Link,
         {
           key: index,
@@ -4726,7 +4774,7 @@ var Pagination = ({
       )
     );
   };
-  return /* @__PURE__ */ React86__default.createElement(Flex, { as: "nav", "aria-label": "pagination" }, /* @__PURE__ */ React86__default.createElement(
+  return /* @__PURE__ */ React84__default.createElement(Flex, { as: "nav", "aria-label": "pagination" }, /* @__PURE__ */ React84__default.createElement(
     UnorderedList,
     {
       display: "flex",
@@ -4735,26 +4783,26 @@ var Pagination = ({
       padding: 0,
       margin: 0
     },
-    /* @__PURE__ */ React86__default.createElement(ListItem, { "aria-label": t2(texts23.previousPage) }, /* @__PURE__ */ React86__default.createElement(
+    /* @__PURE__ */ React84__default.createElement(ListItem, { "aria-label": t2(texts24.previousPage) }, /* @__PURE__ */ React84__default.createElement(
       TextLink,
       {
         onClick: () => onPageChange(selectedPage - 1),
         sx: hasPreviousPage ? style.link : style.disabled
       },
-      /* @__PURE__ */ React86__default.createElement(DropdownLeftFill18Icon, { sx: style.icon })
+      /* @__PURE__ */ React84__default.createElement(DropdownLeftFill18Icon, { sx: style.icon })
     )),
     renderPaginationButtons(),
-    /* @__PURE__ */ React86__default.createElement(ListItem, { "aria-label": t2(texts23.nextPage) }, /* @__PURE__ */ React86__default.createElement(
+    /* @__PURE__ */ React84__default.createElement(ListItem, { "aria-label": t2(texts24.nextPage) }, /* @__PURE__ */ React84__default.createElement(
       TextLink,
       {
         onClick: () => onPageChange(selectedPage + 1),
         sx: hasNextPage ? style.link : style.disabled
       },
-      /* @__PURE__ */ React86__default.createElement(DropdownRightFill18Icon, { sx: style.icon })
+      /* @__PURE__ */ React84__default.createElement(DropdownRightFill18Icon, { sx: style.icon })
     ))
   ));
 };
-var texts23 = createTexts({
+var texts24 = createTexts({
   previousPage: {
     nb: "Forrige side",
     nn: "F\xF8rre side",
@@ -4770,7 +4818,7 @@ var texts23 = createTexts({
 });
 var ProgressDot = ({ isActive }) => {
   const style = useMultiStyleConfig("ProgressIndicator");
-  return /* @__PURE__ */ React86__default.createElement(
+  return /* @__PURE__ */ React84__default.createElement(
     Box,
     {
       as: "svg",
@@ -4780,7 +4828,7 @@ var ProgressDot = ({ isActive }) => {
       viewBox: "0 0 100 100",
       "aria-current": isActive ? "step" : void 0
     },
-    /* @__PURE__ */ React86__default.createElement(Box, { as: "circle", cx: "50", cy: "50", r: "50" })
+    /* @__PURE__ */ React84__default.createElement(Box, { as: "circle", cx: "50", cy: "50", r: "50" })
   );
 };
 
@@ -4791,7 +4839,7 @@ var ProgressIndicator = ({
 }) => {
   const { t: t2 } = useTranslation();
   const style = useMultiStyleConfig("ProgressIndicator");
-  return /* @__PURE__ */ React86__default.createElement(
+  return /* @__PURE__ */ React84__default.createElement(
     Box,
     {
       __css: style.root,
@@ -4799,9 +4847,9 @@ var ProgressIndicator = ({
       "aria-valuemin": 1,
       "aria-valuemax": numberOfSteps,
       "aria-valuenow": activeStep,
-      "aria-valuetext": t2(texts24.stepsOf(activeStep, numberOfSteps))
+      "aria-valuetext": t2(texts25.stepsOf(activeStep, numberOfSteps))
     },
-    /* @__PURE__ */ React86__default.createElement(Box, { __css: style.container }, Array.from({ length: numberOfSteps }, (_, i) => /* @__PURE__ */ React86__default.createElement(
+    /* @__PURE__ */ React84__default.createElement(Box, { __css: style.container }, Array.from({ length: numberOfSteps }, (_, i) => /* @__PURE__ */ React84__default.createElement(
       ProgressDot,
       {
         key: i,
@@ -4811,7 +4859,7 @@ var ProgressIndicator = ({
     )))
   );
 };
-var texts24 = createTexts({
+var texts25 = createTexts({
   stepsOf: (activeStep, numberOfSteps) => ({
     nb: `Steg ${activeStep} av ${numberOfSteps}`,
     nn: `Steg ${activeStep} av ${numberOfSteps}`,
@@ -4828,9 +4876,9 @@ var SporProvider = ({
 }) => {
   const brandCustomizations = brandTheme[brand] ?? {};
   const extendedTheme = deepmerge(theme3, brandCustomizations);
-  return /* @__PURE__ */ React86__default.createElement(LanguageProvider, { language }, /* @__PURE__ */ React86__default.createElement(ChakraProvider, { theme: extendedTheme, ...props }, /* @__PURE__ */ React86__default.createElement(Global, { styles: fontFaces }), children));
+  return /* @__PURE__ */ React84__default.createElement(LanguageProvider, { language }, /* @__PURE__ */ React84__default.createElement(ChakraProvider, { theme: extendedTheme, ...props }, /* @__PURE__ */ React84__default.createElement(Global, { styles: fontFaces }), children));
 };
-var StepperContext = React86__default.createContext(null);
+var StepperContext = React84__default.createContext(null);
 var StepperProvider = ({
   activeStep,
   children,
@@ -4838,7 +4886,7 @@ var StepperProvider = ({
   numberOfSteps,
   variant
 }) => {
-  return /* @__PURE__ */ React86__default.createElement(
+  return /* @__PURE__ */ React84__default.createElement(
     StepperContext.Provider,
     {
       value: { activeStep, onClick, numberOfSteps, variant }
@@ -4847,7 +4895,7 @@ var StepperProvider = ({
   );
 };
 var useStepper = () => {
-  const context = React86__default.useContext(StepperContext);
+  const context = React84__default.useContext(StepperContext);
   if (!context) {
     throw new Error(
       "useStepper must be used within a StepperProvider. Most likely, you forgot to wrap your StepperStep in a Stepper component"
@@ -4875,7 +4923,7 @@ var Stepper = ({
   const { t: t2 } = useTranslation();
   const hideBackButtonOnFirstStep = activeStep === 1 && !onBackButtonClick;
   const shownHeading = heading || title;
-  return /* @__PURE__ */ React86__default.createElement(Box, { sx: style.root }, /* @__PURE__ */ React86__default.createElement(
+  return /* @__PURE__ */ React84__default.createElement(Box, { sx: style.root }, /* @__PURE__ */ React84__default.createElement(
     StepperProvider,
     {
       onClick,
@@ -4883,7 +4931,7 @@ var Stepper = ({
       variant,
       numberOfSteps
     },
-    /* @__PURE__ */ React86__default.createElement(Box, { sx: style.container }, /* @__PURE__ */ React86__default.createElement(Box, { sx: style.innerContainer }, /* @__PURE__ */ React86__default.createElement(
+    /* @__PURE__ */ React84__default.createElement(Box, { sx: style.container }, /* @__PURE__ */ React84__default.createElement(Box, { sx: style.innerContainer }, /* @__PURE__ */ React84__default.createElement(
       Flex,
       {
         justifyContent: "space-between",
@@ -4891,11 +4939,11 @@ var Stepper = ({
         gap: 2,
         flex: 1
       },
-      /* @__PURE__ */ React86__default.createElement(
+      /* @__PURE__ */ React84__default.createElement(
         IconButton,
         {
-          "aria-label": t2(texts25.back),
-          icon: /* @__PURE__ */ React86__default.createElement(ArrowLeftFill24Icon, null),
+          "aria-label": t2(texts26.back),
+          icon: /* @__PURE__ */ React84__default.createElement(ArrowLeftFill24Icon, null),
           variant: "ghost",
           size: "sm",
           visibility: hideBackButtonOnFirstStep ? "hidden" : "visible",
@@ -4908,9 +4956,9 @@ var Stepper = ({
           }
         }
       ),
-      shownHeading && /* @__PURE__ */ React86__default.createElement(Text4, { flex: 1, variant: "sm", as: headingLevel, sx: style.title }, shownHeading),
-      /* @__PURE__ */ React86__default.createElement(Box, { sx: style.stepCounter }, t2(texts25.stepsOf(activeStep, numberOfSteps)))
-    )), /* @__PURE__ */ React86__default.createElement(Flex, { justifyContent: "center", display: ["none", null, "flex"] }, steps.map((step, index) => /* @__PURE__ */ React86__default.createElement(
+      shownHeading && /* @__PURE__ */ React84__default.createElement(Text4, { flex: 1, variant: "sm", as: headingLevel, sx: style.title }, shownHeading),
+      /* @__PURE__ */ React84__default.createElement(Box, { sx: style.stepCounter }, t2(texts26.stepsOf(activeStep, numberOfSteps)))
+    )), /* @__PURE__ */ React84__default.createElement(Flex, { justifyContent: "center", display: ["none", null, "flex"] }, steps.map((step, index) => /* @__PURE__ */ React84__default.createElement(
       StepperStep,
       {
         key: index,
@@ -4923,7 +4971,7 @@ var Stepper = ({
     ))))
   ));
 };
-var texts25 = createTexts({
+var texts26 = createTexts({
   stepsOf: (activeStep, numberOfSteps) => ({
     nb: `Steg ${activeStep}/${numberOfSteps}`,
     nn: `Steg ${activeStep}/${numberOfSteps}`,
@@ -4955,14 +5003,14 @@ var StepperStep = ({
   );
   const iconColor = useColorModeValue("blackAlpha.200", "whiteAlpha.200");
   const isDisabled = state2 !== "active" && isDisabledOverride || state2 === "disabled";
-  return /* @__PURE__ */ React86__default.createElement(Box, { sx: style.stepContainer }, stepNumber > 1 && /* @__PURE__ */ React86__default.createElement(
+  return /* @__PURE__ */ React84__default.createElement(Box, { sx: style.stepContainer }, stepNumber > 1 && /* @__PURE__ */ React84__default.createElement(
     DropdownRightFill18Icon,
     {
       marginX: 5,
       display: ["none", null, "block"],
       color: iconColor
     }
-  ), isDisabled ? /* @__PURE__ */ React86__default.createElement(
+  ), isDisabled ? /* @__PURE__ */ React84__default.createElement(
     Text4,
     {
       variant: "xs",
@@ -4972,7 +5020,7 @@ var StepperStep = ({
       paddingX: 2
     },
     children
-  ) : /* @__PURE__ */ React86__default.createElement(
+  ) : /* @__PURE__ */ React84__default.createElement(
     Button2,
     {
       size: "xs",
@@ -4995,11 +5043,11 @@ var getState = (stepNumber, activeStep) => {
   return "disabled";
 };
 var Tabs = forwardRef((props, ref) => {
-  return /* @__PURE__ */ React86.createElement(Tabs$1, { ...props, ref });
+  return /* @__PURE__ */ React84.createElement(Tabs$1, { ...props, ref });
 });
 var Table = forwardRef((props, ref) => {
   const { variant, size: size2, colorScheme, children, ...rest } = props;
-  return /* @__PURE__ */ React86__default.createElement(Box, { ...rest, ...getStyleProps(props) }, /* @__PURE__ */ React86__default.createElement(Box, { overflowX: "auto", role: "region" }, /* @__PURE__ */ React86__default.createElement(
+  return /* @__PURE__ */ React84__default.createElement(Box, { ...rest, ...getStyleProps(props) }, /* @__PURE__ */ React84__default.createElement(Box, { overflowX: "auto", role: "region" }, /* @__PURE__ */ React84__default.createElement(
     Table$1,
     {
       variant,
@@ -6815,16 +6863,16 @@ Object.assign({}, space, layout, flexbox, grid, position);
 function defineStyle(styles3) {
   return styles3;
 }
-function defineStyleConfig(config45) {
-  return config45;
+function defineStyleConfig(config44) {
+  return config44;
 }
 function createMultiStyleConfigHelpers(parts20) {
   return {
-    definePartsStyle(config45) {
-      return config45;
+    definePartsStyle(config44) {
+      return config44;
     },
-    defineMultiStyleConfig(config45) {
-      return { parts: parts20, ...config45 };
+    defineMultiStyleConfig(config44) {
+      return { parts: parts20, ...config44 };
     }
   };
 }
@@ -10085,7 +10133,6 @@ __export(components_exports, {
   Badge: () => badge_default,
   Breadcrumb: () => breadcrumb_default,
   Button: () => button_default,
-  Card: () => card_default,
   CardSelect: () => card_select_default,
   Checkbox: () => checkbox_default,
   ChoiceChip: () => choice_chip_default,
@@ -10399,9 +10446,13 @@ var config2 = helpers.defineMultiStyleConfig({
       justifyContent: "space-between",
       ...baseText("default", props),
       textAlign: "left",
+      fontSize: ["mobile.sm", null, "desktop.sm"],
       fontFamily: "body",
       fontWeight: "bold",
       outlineOffset: "-2px",
+      paddingX: [2, null, 3],
+      paddingY: [1, null, 1.5],
+      minHeight: [6, null, 7],
       ...focusVisibleStyles(props),
       _disabled: {
         pointerEvents: "none",
@@ -10410,7 +10461,9 @@ var config2 = helpers.defineMultiStyleConfig({
     },
     panel: {
       paddingY: 2,
-      borderBottomRadius: "sm"
+      paddingX: [2, null, 3],
+      borderBottomRadius: "sm",
+      fontSize: ["mobile.sm", null, "desktop.sm"]
     },
     icon: {
       fontSize: "1.25em"
@@ -10467,47 +10520,8 @@ var config2 = helpers.defineMultiStyleConfig({
       }
     })
   },
-  sizes: {
-    sm: {
-      button: {
-        fontSize: ["mobile.xs", null, "desktop.xs"],
-        paddingX: 2,
-        paddingY: 1,
-        minHeight: 6
-      },
-      panel: {
-        fontSize: ["mobile.xs", null, "desktop.xs"],
-        paddingX: 2
-      }
-    },
-    md: {
-      button: {
-        fontSize: ["mobile.sm", null, "desktop.sm"],
-        paddingX: 3,
-        paddingY: 1,
-        minHeight: 7
-      },
-      panel: {
-        fontSize: ["mobile.sm", null, "desktop.sm"],
-        paddingX: 3
-      }
-    },
-    lg: {
-      button: {
-        fontSize: ["mobile.sm", null, "desktop.sm"],
-        paddingX: 3,
-        paddingY: 2,
-        minHeight: 8
-      },
-      panel: {
-        fontSize: ["mobile.sm", null, "desktop.sm"],
-        paddingX: 3
-      }
-    }
-  },
   defaultProps: {
-    variant: "ghost",
-    size: "sm"
+    variant: "base"
   }
 });
 var accordion_default = config2;
@@ -10943,403 +10957,9 @@ var config6 = defineStyleConfig$1({
   }
 });
 var button_default = config6;
-
-// src/theme/foundations/index.ts
-var foundations_exports = {};
-__export(foundations_exports, {
-  borders: () => borders2,
-  breakpoints: () => breakpoints2,
-  colors: () => colors2,
-  config: () => config7,
-  fontSizes: () => fontSizes,
-  fontWeights: () => fontWeights,
-  fonts: () => fonts,
-  lineHeights: () => lineHeights,
-  radii: () => radii2,
-  shadows: () => shadows2,
-  sizes: () => sizes24,
-  space: () => space2,
-  spacing: () => spacing2,
-  styles: () => styles2,
-  textStyles: () => textStyles,
-  zIndices: () => zIndices2
-});
-var borders2 = {
-  none: "0",
-  sm: `${tokens11__default.size.stroke.sm} solid`,
-  "sm-dashed": `${tokens11__default.size.stroke.sm} dashed`,
-  md: `${tokens11__default.size.stroke.md} solid`,
-  "md-dashed": `${tokens11__default.size.stroke.md} dashed`,
-  lg: `${tokens11__default.size.stroke.lg} solid`,
-  "lg-dashed": `${tokens11__default.size.stroke.lg} dashed`
-};
-var breakpoints2 = {
-  base: "0px",
-  sm: tokens11__default.size.breakpoint.sm,
-  md: tokens11__default.size.breakpoint.md,
-  lg: tokens11__default.size.breakpoint.lg,
-  xl: tokens11__default.size.breakpoint.xl,
-  "2xl": tokens11__default.size.breakpoint.xl
-};
-var colors2 = {
-  ...tokens11__default.color.alias,
-  ...tokens11__default.color.palette,
-  ...tokens11__default.color.vyDigital,
-  linjetag: tokens11__default.color.linjetag
-};
-
-// src/theme/foundations/config.ts
-var config7 = {
-  cssVarPrefix: "spor",
-  initialColorMode: "light",
-  useSystemColorMode: false
-};
-var fonts = {
-  body: `${tokens11__default.font.family.body}, arial, sans-serif`,
-  heading: `${tokens11__default.font.family.heading}, arial, sans-serif`,
-  mono: `${tokens11__default.font.family.monospace}, monospace`
-};
-var fontSizes = {
-  "2xs": tokens11__default.size.font.xs.mobile,
-  xs: tokens11__default.size.font.sm.mobile,
-  sm: tokens11__default.size.font.md.mobile,
-  md: tokens11__default.size.font.lg.mobile,
-  lg: tokens11__default.size.font.xl.mobile,
-  xl: tokens11__default.size.font.xxl.mobile,
-  "2xl": tokens11__default.size.font.xl.desktop,
-  "3xl": tokens11__default.size.font.xxl.desktop,
-  mobile: {
-    xs: tokens11__default.size.font.xs.mobile,
-    sm: tokens11__default.size.font.sm.mobile,
-    md: tokens11__default.size.font.md.mobile,
-    lg: tokens11__default.size.font.lg.mobile,
-    xl: tokens11__default.size.font.xl.mobile,
-    xxl: tokens11__default.size.font.xxl.mobile
-  },
-  desktop: {
-    xs: tokens11__default.size.font.xs.desktop,
-    sm: tokens11__default.size.font.sm.desktop,
-    md: tokens11__default.size.font.md.desktop,
-    lg: tokens11__default.size.font.lg.desktop,
-    xl: tokens11__default.size.font.xl.desktop,
-    xxl: tokens11__default.size.font.xxl.desktop
-  }
-};
-
-// src/theme/foundations/fontWeights.ts
-var fontWeights = {
-  light: 300,
-  medium: 400,
-  bold: 700
-};
-var lineHeights = {
-  base: tokens11__default.font.style.lg["line-height"],
-  normal: tokens11__default.font.style.lg["line-height"]
-};
-var radii2 = {
-  none: tokens11__default.size["border-radius"].none,
-  xs: tokens11__default.size["border-radius"].xs,
-  sm: tokens11__default.size["border-radius"].sm,
-  md: tokens11__default.size["border-radius"].md,
-  lg: tokens11__default.size["border-radius"].lg,
-  xl: tokens11__default.size["border-radius"].xl,
-  "2xl": tokens11__default.size["border-radius"]["2xl"],
-  round: "50%"
-};
-var shadows2 = {
-  none: "none",
-  sm: tokens11__default.depth.shadow.sm.value,
-  md: tokens11__default.depth.shadow.md.value,
-  lg: tokens11__default.depth.shadow.lg.value
-};
-var spacing2 = Object.entries(tokens11__default.size.spacing).reduce(
-  (tokens16, [key, token]) => ({
-    ...tokens16,
-    [Number(key)]: token
-  }),
-  {}
-);
-var space2 = spacing2;
-
-// src/theme/foundations/sizes.ts
-var largeSizes2 = {
-  max: "max-content",
-  min: "min-content",
-  full: "100%",
-  "3xs": "14rem",
-  "2xs": "16rem",
-  xs: "20rem",
-  sm: "24rem",
-  md: "28rem",
-  lg: "32rem",
-  xl: "36rem",
-  "2xl": "42rem",
-  "3xl": "48rem",
-  "4xl": "56rem",
-  "5xl": "64rem",
-  "6xl": "72rem",
-  "7xl": "80rem",
-  "8xl": "90rem"
-};
-var container2 = {
-  sm: "640px",
-  md: "768px",
-  lg: "1024px",
-  xl: "1280px"
-};
-var sizes24 = {
-  ...spacing2,
-  ...largeSizes2,
-  container: container2
-};
-var textStyles = {
-  "2xl": {
-    fontSize: [
-      tokens11__default.font.style.xxl["font-size"].mobile,
-      null,
-      null,
-      tokens11__default.font.style.xxl["font-size"].desktop
-    ],
-    fontFamily: tokens11__default.font.style.xxl["font-family"],
-    lineHeight: tokens11__default.font.style.xxl["line-height"]
-  },
-  "xl-display": {
-    fontSize: [
-      tokens11__default.font.style["xl-display"]["font-size"].mobile,
-      null,
-      null,
-      tokens11__default.font.style["xl-display"]["font-size"].desktop
-    ],
-    fontFamily: tokens11__default.font.style["xl-display"]["font-family"],
-    lineHeight: tokens11__default.font.style["xl-display"]["line-height"]
-  },
-  "xl-sans": {
-    fontSize: [
-      tokens11__default.font.style["xl-sans"]["font-size"].mobile,
-      null,
-      null,
-      tokens11__default.font.style["xl-sans"]["font-size"].desktop
-    ],
-    fontFamily: tokens11__default.font.style["xl-sans"]["font-family"],
-    lineHeight: tokens11__default.font.style["xl-sans"]["line-height"]
-  },
-  lg: {
-    fontSize: [
-      tokens11__default.font.style.lg["font-size"].mobile,
-      null,
-      null,
-      tokens11__default.font.style.lg["font-size"].desktop
-    ],
-    fontFamily: tokens11__default.font.style.lg["font-family"],
-    lineHeight: tokens11__default.font.style.lg["line-height"]
-  },
-  md: {
-    fontSize: [
-      tokens11__default.font.style.md["font-size"].mobile,
-      null,
-      null,
-      tokens11__default.font.style.md["font-size"].desktop
-    ],
-    fontFamily: tokens11__default.font.style.md["font-family"],
-    lineHeight: tokens11__default.font.style.md["line-height"]
-  },
-  sm: {
-    fontSize: [
-      tokens11__default.font.style.sm["font-size"].mobile,
-      null,
-      null,
-      tokens11__default.font.style.sm["font-size"].desktop
-    ],
-    fontFamily: tokens11__default.font.style.sm["font-family"],
-    lineHeight: tokens11__default.font.style.sm["line-height"]
-  },
-  xs: {
-    fontSize: [
-      tokens11__default.font.style.xs["font-size"].mobile,
-      null,
-      null,
-      tokens11__default.font.style.xs["font-size"].desktop
-    ],
-    fontFamily: tokens11__default.font.style.xs["font-family"],
-    lineHeight: tokens11__default.font.style.xs["line-height"]
-  }
-};
-var zIndices2 = {
-  hide: tokens11__default.depth["z-index"].hide,
-  auto: "auto",
-  base: tokens11__default.depth["z-index"].base,
-  docked: tokens11__default.depth["z-index"].docked,
-  dropdown: tokens11__default.depth["z-index"].dropdown,
-  sticky: tokens11__default.depth["z-index"].sticky,
-  banner: tokens11__default.depth["z-index"].banner,
-  overlay: tokens11__default.depth["z-index"].overlay,
-  modal: tokens11__default.depth["z-index"].modal,
-  popover: tokens11__default.depth["z-index"].popover,
-  skipLink: tokens11__default.depth["z-index"].skipLink,
-  toast: tokens11__default.depth["z-index"].toast,
-  tooltip: tokens11__default.depth["z-index"].tooltip
-};
-var styles2 = {
-  global: (props) => ({
-    "html, body": {
-      color: mode("darkGrey", "lightGrey")(props)
-    },
-    svg: {
-      display: "initial"
-    }
-  })
-};
-
-// src/theme/components/card.ts
-var config8 = defineStyleConfig$1({
-  baseStyle: (props) => ({
-    appearance: "none",
-    border: "none",
-    overflow: "hidden",
-    fontSize: "inherit",
-    display: "block",
-    transitionProperty: "common",
-    transitionDuration: "fast",
-    borderRadius: "md",
-    // Except for white cards, all cards are light mode always
-    color: "text.default.light",
-    ...getColorSchemeBaseProps(props),
-    "button&, a&, label&, &.is-clickable": {
-      outline: "1px solid",
-      ...getColorSchemeClickableProps(props),
-      ...focusVisibleStyles(props),
-      _hover: getColorSchemeHoverProps(props),
-      _active: getColorSchemeActiveProps(props),
-      _disabled: {
-        ...baseBackground("disabled", props),
-        ...baseBorder("disabled", props),
-        ...baseText("disabled", props),
-        pointerEvents: "none"
-      }
-    }
-  }),
-  sizes: {
-    sm: {
-      "button&, a&, label&, &.is-clickable": {
-        boxShadow: "sm",
-        _hover: {
-          boxShadow: "md"
-        },
-        _active: {
-          boxShadow: "none"
-        }
-      }
-    },
-    lg: {
-      "button&, a&, label&, &.is-clickable": {
-        boxShadow: "md",
-        _hover: {
-          boxShadow: "lg"
-        },
-        _active: {
-          boxShadow: "sm"
-        }
-      }
-    }
-  }
-});
-var card_default = config8;
-var getColorSchemeBaseProps = (props) => {
-  var _a6;
-  switch (props.colorScheme) {
-    case "white":
-      return {
-        ...baseBorder("default", props),
-        backgroundColor: mode(
-          "white",
-          `color-mix(in srgb, white 10%, var(--spor-colors-bg-default-dark))`
-        )(props),
-        color: "inherit"
-      };
-    case "grey":
-      return {
-        backgroundColor: "lightGrey"
-      };
-    case "green": {
-      return {
-        backgroundColor: "seaMist"
-      };
-    }
-    case "red": {
-      return {
-        backgroundColor: "pink"
-      };
-    }
-    default:
-      return {
-        backgroundColor: ((_a6 = colors2[props.colorScheme]) == null ? void 0 : _a6[100]) ?? "platinum"
-      };
-  }
-};
-function getColorSchemeClickableProps(props) {
-  var _a6, _b5;
-  switch (props.colorScheme) {
-    case "white":
-      return {
-        ...floatingBorder("default", props)
-      };
-    case "grey":
-      return {
-        outlineColor: "steel"
-      };
-    default:
-      return {
-        backgroundColor: ((_a6 = colors2[props.colorScheme]) == null ? void 0 : _a6[100]) ?? "platinum",
-        outlineColor: ((_b5 = colors2[props.colorScheme]) == null ? void 0 : _b5[200]) ?? "silver"
-      };
-  }
-}
-var getColorSchemeHoverProps = (props) => {
-  var _a6, _b5;
-  switch (props.colorScheme) {
-    case "white":
-      return {
-        backgroundColor: mode(
-          "white",
-          `color-mix(in srgb, white 20%, var(--spor-colors-bg-default-dark))`
-        )(props),
-        ...floatingBorder("hover", props)
-      };
-    case "grey":
-      return {
-        outlineColor: "osloGrey"
-      };
-    default:
-      return {
-        backgroundColor: ((_a6 = colors2[props.colorScheme]) == null ? void 0 : _a6[200]) ?? "silver",
-        outlineColor: ((_b5 = colors2[props.colorScheme]) == null ? void 0 : _b5[400]) ?? "silver"
-      };
-  }
-};
-var getColorSchemeActiveProps = (props) => {
-  var _a6, _b5;
-  const { colorScheme } = props;
-  switch (colorScheme) {
-    case "white":
-      return {
-        backgroundColor: mode("bg.tertiary.light", `bg.default.dark`)(props),
-        ...floatingBorder("active", props)
-      };
-    case "grey":
-      return {
-        backgroundColor: "white",
-        outlineColor: "steel"
-      };
-    default:
-      return {
-        backgroundColor: ((_a6 = colors2[colorScheme]) == null ? void 0 : _a6[50]) ?? "lightGrey",
-        outlineColor: ((_b5 = colors2[colorScheme]) == null ? void 0 : _b5[100]) ?? "silver"
-      };
-  }
-};
 var parts3 = anatomy("card-select").parts("trigger", "card");
 var helpers4 = createMultiStyleConfigHelpers(parts3.keys);
-var config9 = helpers4.defineMultiStyleConfig({
+var config7 = helpers4.defineMultiStyleConfig({
   baseStyle: (props) => ({
     trigger: {
       appearance: "none",
@@ -11441,9 +11061,9 @@ var config9 = helpers4.defineMultiStyleConfig({
     }
   }
 });
-var card_select_default = config9;
+var card_select_default = config7;
 var helpers5 = createMultiStyleConfigHelpers$1(checkboxAnatomy.keys);
-var config10 = helpers5.defineMultiStyleConfig({
+var config8 = helpers5.defineMultiStyleConfig({
   baseStyle: (props) => ({
     container: {
       _hover: {
@@ -11514,10 +11134,10 @@ var config10 = helpers5.defineMultiStyleConfig({
     }
   })
 });
-var checkbox_default = config10;
+var checkbox_default = config8;
 var parts4 = anatomy$1("choice-chip").parts("container", "icon", "label");
 var helpers6 = createMultiStyleConfigHelpers$1(parts4.keys);
-var config11 = helpers6.defineMultiStyleConfig({
+var config9 = helpers6.defineMultiStyleConfig({
   baseStyle: (props) => ({
     container: {
       display: "inline-flex",
@@ -11622,102 +11242,350 @@ var config11 = helpers6.defineMultiStyleConfig({
       }
     })
   },
-  sizes: {
-    xs: {
-      container: {
-        _checked: {
-          borderRadius: "0.563rem"
-        },
-        height: 5,
-        paddingX: 1.5
-      }
-    },
-    sm: {
-      container: {
-        _checked: {
-          borderRadius: "sm"
-        },
-        height: 6,
-        paddingX: 2
-      }
-    },
-    md: {
-      container: {
-        _checked: {
-          borderRadius: "sm"
-        },
-        height: 7,
-        paddingX: 2
-      }
-    },
-    lg: {
-      container: {
-        _checked: {
-          borderRadius: "md"
-        },
-        height: 8,
-        paddingX: 3
-      }
-    }
+  sizes: {
+    xs: {
+      container: {
+        _checked: {
+          borderRadius: "0.563rem"
+        },
+        height: 5,
+        paddingX: 1.5
+      }
+    },
+    sm: {
+      container: {
+        _checked: {
+          borderRadius: "sm"
+        },
+        height: 6,
+        paddingX: 2
+      }
+    },
+    md: {
+      container: {
+        _checked: {
+          borderRadius: "sm"
+        },
+        height: 7,
+        paddingX: 2
+      }
+    },
+    lg: {
+      container: {
+        _checked: {
+          borderRadius: "md"
+        },
+        height: 8,
+        paddingX: 3
+      }
+    }
+  },
+  defaultProps: {
+    size: "sm"
+  }
+});
+var choice_chip_default = config9;
+var $size6 = cssVar$1("close-button-size");
+var config10 = defineStyleConfig$1({
+  baseStyle: (props) => ({
+    w: [$size6.reference],
+    h: [$size6.reference],
+    transitionProperty: "common",
+    transitionDuration: "normal",
+    borderRadius: "md",
+    backgroundColor: "transparent",
+    color: mode("darkGrey", "white")(props),
+    fontWeight: "normal",
+    ...focusVisibleStyles(props),
+    _hover: {
+      ...ghostBackground("hover", props),
+      _disabled: {
+        color: "dimGrey"
+      }
+    },
+    _active: {
+      ...ghostBackground("active", props)
+    }
+  }),
+  sizes: {
+    lg: {
+      [$size6.variable]: "40px",
+      fontSize: "xs"
+    },
+    md: {
+      [$size6.variable]: "32px",
+      fontSize: "0.75rem"
+    },
+    sm: {
+      [$size6.variable]: "24px",
+      fontSize: "0.625rem"
+    }
+  },
+  defaultProps: {
+    size: "md"
+  }
+});
+var close_button_default = config10;
+var { variants: variants13, defaultProps: defaultProps2 } = badge_default;
+var config11 = defineStyleConfig$1({
+  baseStyle: {
+    fontFamily: "monospace",
+    fontSize: ["mobile.xs", "desktop.xs"],
+    borderRadius: "xs",
+    paddingX: 1
+  },
+  variants: variants13,
+  defaultProps: defaultProps2
+});
+var code_default = config11;
+
+// src/theme/foundations/index.ts
+var foundations_exports = {};
+__export(foundations_exports, {
+  borders: () => borders2,
+  breakpoints: () => breakpoints2,
+  colors: () => colors2,
+  config: () => config12,
+  fontSizes: () => fontSizes,
+  fontWeights: () => fontWeights,
+  fonts: () => fonts,
+  lineHeights: () => lineHeights,
+  radii: () => radii2,
+  shadows: () => shadows2,
+  sizes: () => sizes24,
+  space: () => space2,
+  spacing: () => spacing2,
+  styles: () => styles2,
+  textStyles: () => textStyles,
+  zIndices: () => zIndices2
+});
+var borders2 = {
+  none: "0",
+  sm: `${tokens11__default.size.stroke.sm} solid`,
+  "sm-dashed": `${tokens11__default.size.stroke.sm} dashed`,
+  md: `${tokens11__default.size.stroke.md} solid`,
+  "md-dashed": `${tokens11__default.size.stroke.md} dashed`,
+  lg: `${tokens11__default.size.stroke.lg} solid`,
+  "lg-dashed": `${tokens11__default.size.stroke.lg} dashed`
+};
+var breakpoints2 = {
+  base: "0px",
+  sm: tokens11__default.size.breakpoint.sm,
+  md: tokens11__default.size.breakpoint.md,
+  lg: tokens11__default.size.breakpoint.lg,
+  xl: tokens11__default.size.breakpoint.xl,
+  "2xl": tokens11__default.size.breakpoint.xl
+};
+var colors2 = {
+  ...tokens11__default.color.alias,
+  ...tokens11__default.color.palette,
+  ...tokens11__default.color.vyDigital,
+  linjetag: tokens11__default.color.linjetag
+};
+
+// src/theme/foundations/config.ts
+var config12 = {
+  cssVarPrefix: "spor",
+  initialColorMode: "light",
+  useSystemColorMode: false
+};
+var fonts = {
+  body: `${tokens11__default.font.family.body}, arial, sans-serif`,
+  heading: `${tokens11__default.font.family.heading}, arial, sans-serif`,
+  mono: `${tokens11__default.font.family.monospace}, monospace`
+};
+var fontSizes = {
+  "2xs": tokens11__default.size.font.xs.mobile,
+  xs: tokens11__default.size.font.sm.mobile,
+  sm: tokens11__default.size.font.md.mobile,
+  md: tokens11__default.size.font.lg.mobile,
+  lg: tokens11__default.size.font.xl.mobile,
+  xl: tokens11__default.size.font.xxl.mobile,
+  "2xl": tokens11__default.size.font.xl.desktop,
+  "3xl": tokens11__default.size.font.xxl.desktop,
+  mobile: {
+    xs: tokens11__default.size.font.xs.mobile,
+    sm: tokens11__default.size.font.sm.mobile,
+    md: tokens11__default.size.font.md.mobile,
+    lg: tokens11__default.size.font.lg.mobile,
+    xl: tokens11__default.size.font.xl.mobile,
+    xxl: tokens11__default.size.font.xxl.mobile
+  },
+  desktop: {
+    xs: tokens11__default.size.font.xs.desktop,
+    sm: tokens11__default.size.font.sm.desktop,
+    md: tokens11__default.size.font.md.desktop,
+    lg: tokens11__default.size.font.lg.desktop,
+    xl: tokens11__default.size.font.xl.desktop,
+    xxl: tokens11__default.size.font.xxl.desktop
+  }
+};
+
+// src/theme/foundations/fontWeights.ts
+var fontWeights = {
+  light: 300,
+  medium: 400,
+  bold: 700
+};
+var lineHeights = {
+  base: tokens11__default.font.style.lg["line-height"],
+  normal: tokens11__default.font.style.lg["line-height"]
+};
+var radii2 = {
+  none: tokens11__default.size["border-radius"].none,
+  xs: tokens11__default.size["border-radius"].xs,
+  sm: tokens11__default.size["border-radius"].sm,
+  md: tokens11__default.size["border-radius"].md,
+  lg: tokens11__default.size["border-radius"].lg,
+  xl: tokens11__default.size["border-radius"].xl,
+  "2xl": tokens11__default.size["border-radius"]["2xl"],
+  round: "50%"
+};
+var shadows2 = {
+  none: "none",
+  sm: tokens11__default.depth.shadow.sm.value,
+  md: tokens11__default.depth.shadow.md.value,
+  lg: tokens11__default.depth.shadow.lg.value
+};
+var spacing2 = Object.entries(tokens11__default.size.spacing).reduce(
+  (tokens16, [key, token]) => ({
+    ...tokens16,
+    [Number(key)]: token
+  }),
+  {}
+);
+var space2 = spacing2;
+
+// src/theme/foundations/sizes.ts
+var largeSizes2 = {
+  max: "max-content",
+  min: "min-content",
+  full: "100%",
+  "3xs": "14rem",
+  "2xs": "16rem",
+  xs: "20rem",
+  sm: "24rem",
+  md: "28rem",
+  lg: "32rem",
+  xl: "36rem",
+  "2xl": "42rem",
+  "3xl": "48rem",
+  "4xl": "56rem",
+  "5xl": "64rem",
+  "6xl": "72rem",
+  "7xl": "80rem",
+  "8xl": "90rem"
+};
+var container2 = {
+  sm: "640px",
+  md: "768px",
+  lg: "1024px",
+  xl: "1280px"
+};
+var sizes24 = {
+  ...spacing2,
+  ...largeSizes2,
+  container: container2
+};
+var textStyles = {
+  "2xl": {
+    fontSize: [
+      tokens11__default.font.style.xxl["font-size"].mobile,
+      null,
+      null,
+      tokens11__default.font.style.xxl["font-size"].desktop
+    ],
+    fontFamily: tokens11__default.font.style.xxl["font-family"],
+    lineHeight: tokens11__default.font.style.xxl["line-height"]
+  },
+  "xl-display": {
+    fontSize: [
+      tokens11__default.font.style["xl-display"]["font-size"].mobile,
+      null,
+      null,
+      tokens11__default.font.style["xl-display"]["font-size"].desktop
+    ],
+    fontFamily: tokens11__default.font.style["xl-display"]["font-family"],
+    lineHeight: tokens11__default.font.style["xl-display"]["line-height"]
   },
-  defaultProps: {
-    size: "sm"
+  "xl-sans": {
+    fontSize: [
+      tokens11__default.font.style["xl-sans"]["font-size"].mobile,
+      null,
+      null,
+      tokens11__default.font.style["xl-sans"]["font-size"].desktop
+    ],
+    fontFamily: tokens11__default.font.style["xl-sans"]["font-family"],
+    lineHeight: tokens11__default.font.style["xl-sans"]["line-height"]
+  },
+  lg: {
+    fontSize: [
+      tokens11__default.font.style.lg["font-size"].mobile,
+      null,
+      null,
+      tokens11__default.font.style.lg["font-size"].desktop
+    ],
+    fontFamily: tokens11__default.font.style.lg["font-family"],
+    lineHeight: tokens11__default.font.style.lg["line-height"]
+  },
+  md: {
+    fontSize: [
+      tokens11__default.font.style.md["font-size"].mobile,
+      null,
+      null,
+      tokens11__default.font.style.md["font-size"].desktop
+    ],
+    fontFamily: tokens11__default.font.style.md["font-family"],
+    lineHeight: tokens11__default.font.style.md["line-height"]
+  },
+  sm: {
+    fontSize: [
+      tokens11__default.font.style.sm["font-size"].mobile,
+      null,
+      null,
+      tokens11__default.font.style.sm["font-size"].desktop
+    ],
+    fontFamily: tokens11__default.font.style.sm["font-family"],
+    lineHeight: tokens11__default.font.style.sm["line-height"]
+  },
+  xs: {
+    fontSize: [
+      tokens11__default.font.style.xs["font-size"].mobile,
+      null,
+      null,
+      tokens11__default.font.style.xs["font-size"].desktop
+    ],
+    fontFamily: tokens11__default.font.style.xs["font-family"],
+    lineHeight: tokens11__default.font.style.xs["line-height"]
   }
-});
-var choice_chip_default = config11;
-var $size6 = cssVar$1("close-button-size");
-var config12 = defineStyleConfig$1({
-  baseStyle: (props) => ({
-    w: [$size6.reference],
-    h: [$size6.reference],
-    transitionProperty: "common",
-    transitionDuration: "normal",
-    borderRadius: "md",
-    backgroundColor: "transparent",
-    color: mode("darkGrey", "white")(props),
-    fontWeight: "normal",
-    ...focusVisibleStyles(props),
-    _hover: {
-      ...ghostBackground("hover", props),
-      _disabled: {
-        color: "dimGrey"
-      }
-    },
-    _active: {
-      ...ghostBackground("active", props)
-    }
-  }),
-  sizes: {
-    lg: {
-      [$size6.variable]: "40px",
-      fontSize: "xs"
-    },
-    md: {
-      [$size6.variable]: "32px",
-      fontSize: "0.75rem"
+};
+var zIndices2 = {
+  hide: tokens11__default.depth["z-index"].hide,
+  auto: "auto",
+  base: tokens11__default.depth["z-index"].base,
+  docked: tokens11__default.depth["z-index"].docked,
+  dropdown: tokens11__default.depth["z-index"].dropdown,
+  sticky: tokens11__default.depth["z-index"].sticky,
+  banner: tokens11__default.depth["z-index"].banner,
+  overlay: tokens11__default.depth["z-index"].overlay,
+  modal: tokens11__default.depth["z-index"].modal,
+  popover: tokens11__default.depth["z-index"].popover,
+  skipLink: tokens11__default.depth["z-index"].skipLink,
+  toast: tokens11__default.depth["z-index"].toast,
+  tooltip: tokens11__default.depth["z-index"].tooltip
+};
+var styles2 = {
+  global: (props) => ({
+    "html, body": {
+      color: mode("darkGrey", "lightGrey")(props)
     },
-    sm: {
-      [$size6.variable]: "24px",
-      fontSize: "0.625rem"
+    svg: {
+      display: "initial"
     }
-  },
-  defaultProps: {
-    size: "md"
-  }
-});
-var close_button_default = config12;
-var { variants: variants13, defaultProps: defaultProps2 } = badge_default;
-var config13 = defineStyleConfig$1({
-  baseStyle: {
-    fontFamily: "monospace",
-    fontSize: ["mobile.xs", "desktop.xs"],
-    borderRadius: "xs",
-    paddingX: 1
-  },
-  variants: variants13,
-  defaultProps: defaultProps2
-});
-var code_default = config13;
+  })
+};
+
+// src/theme/components/datepicker.ts
 var parts5 = anatomy$1("datepicker").parts(
   "wrapper",
   "calendarTriggerButton",
@@ -11733,7 +11601,7 @@ var parts5 = anatomy$1("datepicker").parts(
 );
 var $arrowBackground = cssVar$1("popper-arrow-bg");
 var helpers7 = createMultiStyleConfigHelpers$1(parts5.keys);
-var config14 = helpers7.defineMultiStyleConfig({
+var config13 = helpers7.defineMultiStyleConfig({
   baseStyle: (props) => ({
     wrapper: {
       transitionProperty: "box-shadow",
@@ -11748,7 +11616,9 @@ var config14 = helpers7.defineMultiStyleConfig({
       },
       _disabled: {
         pointerEvents: "none",
-        ...baseBackground("disabled", props)
+        ...baseBackground("disabled", props),
+        ...baseBorder("disabled", props),
+        ...baseText("disabled", props)
       },
       _focusWithin: {
         ...focusVisibleStyles(props)._focusVisible
@@ -11756,15 +11626,10 @@ var config14 = helpers7.defineMultiStyleConfig({
     },
     inputLabel: {
       fontSize: "mobile.xs",
-      color: mode("darkGrey", "white")(props),
       margin: 0,
       cursor: "text"
     },
     dateTimeSegment: {
-      color: mode(
-        "darkGrey",
-        props.isPlaceholder ? "whiteAlpha.400" : "white"
-      )(props),
       _focus: {
         ...brandBackground("hover", props),
         color: "white"
@@ -11775,13 +11640,9 @@ var config14 = helpers7.defineMultiStyleConfig({
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
-      borderLeftRadius: "sm",
       transitionProperty: "box-shadow, background-color",
       transitionSpeed: "fast",
       position: "relative",
-      paddingTop: 1,
-      paddingBottom: 1,
-      borderRadius: "sm",
       right: "9px",
       ...focusVisibleStyles(props),
       _hover: {
@@ -11876,9 +11737,6 @@ var config14 = helpers7.defineMultiStyleConfig({
         },
         _invalid: {
           ...baseBorder("invalid", props)
-        },
-        _disabled: {
-          ...baseBorder("disabled", props)
         }
       }
     }),
@@ -11892,9 +11750,6 @@ var config14 = helpers7.defineMultiStyleConfig({
         },
         _invalid: {
           ...baseBorder("invalid", props)
-        },
-        _disabled: {
-          ...baseBorder("disabled", props)
         }
       }
     }),
@@ -11910,7 +11765,7 @@ var config14 = helpers7.defineMultiStyleConfig({
     })
   }
 });
-var datepicker_default = config14;
+var datepicker_default = config13;
 var baseStyle43 = defineStyle((props) => ({
   borderColor: mode("blackAlpha.300", "whiteAlpha.300")(props)
 }));
@@ -11966,7 +11821,7 @@ var bg = (bg2, props) => {
 
 // src/theme/components/drawer.ts
 var helpers8 = createMultiStyleConfigHelpers$1(modalAnatomy.keys);
-var config15 = helpers8.defineMultiStyleConfig({
+var config14 = helpers8.defineMultiStyleConfig({
   baseStyle: (props) => ({
     overlay: {
       backgroundColor: "blackAlpha.600",
@@ -12045,10 +11900,10 @@ function getSize5(value) {
     dialog: { maxWidth: value }
   };
 }
-var drawer_default = config15;
+var drawer_default = config14;
 var parts6 = anatomy$1("fab").parts("container", "icon", "text");
 var helpers9 = createMultiStyleConfigHelpers$1(parts6.keys);
-var config16 = helpers9.defineMultiStyleConfig({
+var config15 = helpers9.defineMultiStyleConfig({
   baseStyle: (props) => ({
     container: {
       display: "flex",
@@ -12130,7 +11985,7 @@ var config16 = helpers9.defineMultiStyleConfig({
     variant: "brand"
   }
 });
-var fab_default = config16;
+var fab_default = config15;
 var getPositionProps = (props) => {
   switch (props.placement) {
     case "top left":
@@ -12144,7 +11999,7 @@ var getPositionProps = (props) => {
   }
 };
 var helpers10 = createMultiStyleConfigHelpers$1(formAnatomy.keys);
-var config17 = helpers10.defineMultiStyleConfig({
+var config16 = helpers10.defineMultiStyleConfig({
   baseStyle: (props) => ({
     container: {
       width: "100%",
@@ -12164,8 +12019,8 @@ var config17 = helpers10.defineMultiStyleConfig({
     }
   })
 });
-var form_default = config17;
-var config18 = defineStyleConfig$1({
+var form_default = config16;
+var config17 = defineStyleConfig$1({
   baseStyle: {
     fontSize: "mobile.sm",
     marginEnd: 3,
@@ -12178,7 +12033,7 @@ var config18 = defineStyleConfig$1({
     }
   }
 });
-var form_label_default = config18;
+var form_label_default = config17;
 
 // src/theme/utils/sr-utils.ts
 var srOnly2 = {
@@ -12202,7 +12057,7 @@ var parts7 = anatomy("InfoSelect").parts(
   "arrowIcon"
 );
 var helpers11 = createMultiStyleConfigHelpers$1(parts7.keys);
-var config19 = helpers11.defineMultiStyleConfig({
+var config18 = helpers11.defineMultiStyleConfig({
   baseStyle: (props) => ({
     container: {},
     label: {
@@ -12269,7 +12124,7 @@ var config19 = helpers11.defineMultiStyleConfig({
     variant: "base"
   }
 });
-var info_select_default = config19;
+var info_select_default = config18;
 var parts8 = anatomy$1("travel-tag").parts(
   "container",
   "iconContainer",
@@ -12280,7 +12135,7 @@ var parts8 = anatomy$1("travel-tag").parts(
   "deviationIcon"
 );
 var helpers12 = createMultiStyleConfigHelpers$1(parts8.keys);
-var config20 = helpers12.defineMultiStyleConfig({
+var config19 = helpers12.defineMultiStyleConfig({
   baseStyle: (props) => ({
     container: {
       position: "relative",
@@ -12471,7 +12326,7 @@ var config20 = helpers12.defineMultiStyleConfig({
     size: "md"
   }
 });
-var travel_tag_default = config20;
+var travel_tag_default = config19;
 var getDeviationContainerStyle = (props) => {
   switch (props.deviationLevel) {
     case "critical":
@@ -12526,7 +12381,7 @@ var parts9 = anatomy$1("info-tag").parts(
   "description"
 );
 var helpers13 = createMultiStyleConfigHelpers$1(parts9.keys);
-var config21 = helpers13.defineMultiStyleConfig({
+var config20 = helpers13.defineMultiStyleConfig({
   baseStyle: (props) => ({
     ...travel_tag_default.baseStyle(props),
     iconContainer: {
@@ -12573,9 +12428,9 @@ var config21 = helpers13.defineMultiStyleConfig({
     })
   }
 });
-var info_tag_default = config21;
+var info_tag_default = config20;
 var helpers14 = createMultiStyleConfigHelpers$1(inputAnatomy.keys);
-var config22 = helpers14.defineMultiStyleConfig({
+var config21 = helpers14.defineMultiStyleConfig({
   baseStyle: (props) => ({
     field: {
       appearance: "none",
@@ -12641,10 +12496,10 @@ var config22 = helpers14.defineMultiStyleConfig({
     }
   })
 });
-var input_default = config22;
+var input_default = config21;
 var parts10 = anatomy$1("line-tag").parts("iconContainer", "icon");
 var helpers15 = createMultiStyleConfigHelpers$1(parts10.keys);
-var config23 = helpers15.defineMultiStyleConfig({
+var config22 = helpers15.defineMultiStyleConfig({
   baseStyle: {
     iconContainer: {
       display: "flex",
@@ -12761,8 +12616,8 @@ var config23 = helpers15.defineMultiStyleConfig({
     size: "md"
   }
 });
-var line_icon_default = config23;
-var config24 = defineStyleConfig$1({
+var line_icon_default = config22;
+var config23 = defineStyleConfig$1({
   baseStyle: (props) => ({
     transitionProperty: "common",
     transitionDuration: "fast",
@@ -12830,7 +12685,7 @@ var config24 = defineStyleConfig$1({
     variant: "primary"
   }
 });
-var link_default = config24;
+var link_default = config23;
 
 // src/theme/components/list.ts
 var { defineMultiStyleConfig: defineMultiStyleConfig28, definePartsStyle: definePartsStyle28 } = createMultiStyleConfigHelpers(listAnatomy.keys);
@@ -12850,6 +12705,27 @@ var baseStyle44 = definePartsStyle28({
 var list_default = defineMultiStyleConfig28({
   baseStyle: baseStyle44
 });
+function outlineBorder(state2, props) {
+  switch (state2) {
+    case "error":
+      return {
+        outlineColor: mode("outline.error.light", "outline.error.dark")(props)
+      };
+    case "focus":
+      return {
+        outlineColor: mode("outline.focus.light", "outline.focus.dark")(props)
+      };
+    default:
+      return {
+        outlineColor: mode(
+          "outline.default.light",
+          "outline.default.dark"
+        )(props)
+      };
+  }
+}
+
+// src/theme/components/listbox.ts
 var parts11 = anatomy("ListBox").parts(
   "container",
   "item",
@@ -12857,7 +12733,7 @@ var parts11 = anatomy("ListBox").parts(
   "description"
 );
 var helpers16 = createMultiStyleConfigHelpers$1(parts11.keys);
-var config25 = helpers16.defineMultiStyleConfig({
+var config24 = helpers16.defineMultiStyleConfig({
   baseStyle: (props) => ({
     container: {
       ...surface("default", props),
@@ -12881,12 +12757,12 @@ var config25 = helpers16.defineMultiStyleConfig({
       _active: {
         ...ghostBackground("active", props)
       },
+      _focusVisible: {
+        ...outlineBorder("focus", props)
+      },
       _hover: {
         ...ghostBackground("hover", props)
       },
-      _focus: {
-        ...ghostBackground("selected", props)
-      },
       _selected: {
         ...ghostBackground("active", props)
       }
@@ -12901,10 +12777,10 @@ var config25 = helpers16.defineMultiStyleConfig({
     }
   })
 });
-var listbox_default = config25;
+var listbox_default = config24;
 var parts12 = anatomy$1("media-controller-button").parts("container", "icon");
 var helpers17 = createMultiStyleConfigHelpers$1(parts12.keys);
-var config26 = helpers17.defineMultiStyleConfig({
+var config25 = helpers17.defineMultiStyleConfig({
   baseStyle: (props) => ({
     container: {
       fontSize: 30,
@@ -12987,9 +12863,9 @@ var config26 = helpers17.defineMultiStyleConfig({
     })
   }
 });
-var media_controller_button_default = config26;
+var media_controller_button_default = config25;
 var helpers18 = createMultiStyleConfigHelpers$1(modalAnatomy.keys);
-var config27 = helpers18.defineMultiStyleConfig({
+var config26 = helpers18.defineMultiStyleConfig({
   baseStyle: (props) => ({
     overlay: {
       backgroundColor: "blackAlpha.600",
@@ -13052,7 +12928,7 @@ var config27 = helpers18.defineMultiStyleConfig({
     size: "md"
   }
 });
-var modal_default = config27;
+var modal_default = config26;
 function getSize6(value) {
   if (value === "full") {
     return {
@@ -13077,7 +12953,7 @@ var parts13 = anatomy("NumericStepper").parts(
   "input"
 );
 var helpers19 = createMultiStyleConfigHelpers$1(parts13.keys);
-var config28 = helpers19.defineMultiStyleConfig({
+var config27 = helpers19.defineMultiStyleConfig({
   baseStyle: (props) => ({
     container: {
       display: "flex",
@@ -13122,7 +12998,7 @@ var config28 = helpers19.defineMultiStyleConfig({
     }
   })
 });
-var numeric_stepper_default = config28;
+var numeric_stepper_default = config27;
 var parts14 = anatomy$1("Pagination").parts(
   "listItem",
   "link",
@@ -13131,7 +13007,7 @@ var parts14 = anatomy$1("Pagination").parts(
   "icon"
 );
 var helpers20 = createMultiStyleConfigHelpers$1(parts14.keys);
-var config29 = helpers20.defineMultiStyleConfig({
+var config28 = helpers20.defineMultiStyleConfig({
   baseStyle: (props) => ({
     activeButton: {
       fontWeight: "bold",
@@ -13187,12 +13063,12 @@ var commonStyles = {
   borderRadius: 50,
   fontSize: "xs"
 };
-var pagination_default = config29;
+var pagination_default = config28;
 var $popperBg2 = cssVar$1("popper-bg");
 var $arrowBg3 = cssVar$1("popper-arrow-bg");
 var $arrowShadowColor2 = cssVar$1("popper-arrow-shadow-color");
 var helpers21 = createMultiStyleConfigHelpers$1(popoverAnatomy.keys);
-var config30 = helpers21.defineMultiStyleConfig({
+var config29 = helpers21.defineMultiStyleConfig({
   baseStyle: (props) => ({
     popper: {
       zIndex: "popover"
@@ -13247,7 +13123,7 @@ var config30 = helpers21.defineMultiStyleConfig({
     }
   }
 });
-var popover_default = config30;
+var popover_default = config29;
 var parts15 = anatomy("progressBar").parts(
   "container",
   "background",
@@ -13255,7 +13131,7 @@ var parts15 = anatomy("progressBar").parts(
   "description"
 );
 var helpers22 = createMultiStyleConfigHelpers(parts15.keys);
-var config31 = helpers22.defineMultiStyleConfig({
+var config30 = helpers22.defineMultiStyleConfig({
   baseStyle: (props) => ({
     container: {
       minWidth: "100px"
@@ -13287,14 +13163,14 @@ var config31 = helpers22.defineMultiStyleConfig({
     }
   })
 });
-var progress_bar_default = config31;
+var progress_bar_default = config30;
 var parts16 = anatomy$1("progress-indicator").parts(
   "root",
   "container",
   "progressDot"
 );
 var helpers23 = createMultiStyleConfigHelpers$1(parts16.keys);
-var config32 = helpers23.defineMultiStyleConfig({
+var config31 = helpers23.defineMultiStyleConfig({
   baseStyle: (props) => ({
     root: {
       width: "100%"
@@ -13325,28 +13201,7 @@ var config32 = helpers23.defineMultiStyleConfig({
     variant: "base"
   }
 });
-var progress_indicator_default = config32;
-function outlineBorder(state2, props) {
-  switch (state2) {
-    case "error":
-      return {
-        outlineColor: mode("outline.error.light", "outline.error.dark")(props)
-      };
-    case "focus":
-      return {
-        outlineColor: mode("outline.focus.light", "outline.focus.dark")(props)
-      };
-    default:
-      return {
-        outlineColor: mode(
-          "outline.default.light",
-          "outline.default.dark"
-        )(props)
-      };
-  }
-}
-
-// src/theme/components/radio-card.ts
+var progress_indicator_default = config31;
 var parts17 = anatomy$1("radio-card").parts(
   "container",
   "checked",
@@ -13355,7 +13210,7 @@ var parts17 = anatomy$1("radio-card").parts(
   "focusedChecked"
 );
 var helpers24 = createMultiStyleConfigHelpers$1(parts17.keys);
-var config33 = helpers24.defineMultiStyleConfig({
+var config32 = helpers24.defineMultiStyleConfig({
   baseStyle: (props) => ({
     container: {
       overflow: "hidden",
@@ -13471,9 +13326,9 @@ var config33 = helpers24.defineMultiStyleConfig({
     })
   }
 });
-var radio_card_default = config33;
+var radio_card_default = config32;
 var helpers25 = createMultiStyleConfigHelpers$1(radioAnatomy.keys);
-var config34 = helpers25.defineMultiStyleConfig({
+var config33 = helpers25.defineMultiStyleConfig({
   baseStyle: (props) => ({
     container: {
       _hover: {
@@ -13529,10 +13384,10 @@ var config34 = helpers25.defineMultiStyleConfig({
     }
   })
 });
-var radio_default = config34;
+var radio_default = config33;
 var parts18 = selectAnatomy.extend("root");
 var helpers26 = createMultiStyleConfigHelpers$1(parts18.keys);
-var config35 = helpers26.defineMultiStyleConfig({
+var config34 = helpers26.defineMultiStyleConfig({
   baseStyle: (props) => ({
     root: {
       width: "100%",
@@ -13572,14 +13427,14 @@ var config35 = helpers26.defineMultiStyleConfig({
     }
   })
 });
-var select_default = config35;
+var select_default = config34;
 var fade = (startColor, endColor) => keyframes({
   from: { borderColor: startColor, background: startColor },
   to: { borderColor: endColor, background: endColor }
 });
 var $startColor2 = cssVar$1("skeleton-start-color");
 var $endColor2 = cssVar$1("skeleton-end-color");
-var config36 = defineStyleConfig$1({
+var config35 = defineStyleConfig$1({
   baseStyle: (props) => {
     const defaultStartColor = mode("blackAlpha.300", "whiteAlpha.300")(props);
     const defaultEndColor = mode("blackAlpha.100", "whiteAlpha.100")(props);
@@ -13602,7 +13457,7 @@ var config36 = defineStyleConfig$1({
     };
   }
 });
-var skeleton_default = config36;
+var skeleton_default = config35;
 var parts19 = anatomy$1("stepper").parts(
   "root",
   "container",
@@ -13616,7 +13471,7 @@ var parts19 = anatomy$1("stepper").parts(
   "closeButton"
 );
 var helpers27 = createMultiStyleConfigHelpers$1(parts19.keys);
-var config37 = helpers27.defineMultiStyleConfig({
+var config36 = helpers27.defineMultiStyleConfig({
   baseStyle: {
     root: {
       display: "flex",
@@ -13685,14 +13540,14 @@ var config37 = helpers27.defineMultiStyleConfig({
     variant: "base"
   }
 });
-var stepper_default = config37;
+var stepper_default = config36;
 var $width2 = cssVar$1("switch-track-width");
 var $height3 = cssVar$1("switch-track-height");
 var $diff2 = cssVar$1("switch-track-diff");
 var diffValue2 = calc$1.subtract($width2, $height3);
 var $translateX2 = cssVar$1("switch-thumb-x");
 var helpers28 = createMultiStyleConfigHelpers$1(switchAnatomy.keys);
-var config38 = helpers28.defineMultiStyleConfig({
+var config37 = helpers28.defineMultiStyleConfig({
   baseStyle: (props) => ({
     container: {
       [$diff2.variable]: diffValue2,
@@ -13785,14 +13640,14 @@ var config38 = helpers28.defineMultiStyleConfig({
     size: "md"
   }
 });
-var switch_default = config38;
+var switch_default = config37;
 var helpers29 = createMultiStyleConfigHelpers$1(tableAnatomy.keys);
 var numericStyles2 = {
   "&[data-is-numeric=true]": {
     textAlign: "end"
   }
 };
-var config39 = helpers29.defineMultiStyleConfig({
+var config38 = helpers29.defineMultiStyleConfig({
   baseStyle: (props) => ({
     table: {
       borderCollapse: "collapse",
@@ -13938,9 +13793,9 @@ var config39 = helpers29.defineMultiStyleConfig({
     colorScheme: "grey"
   }
 });
-var table_default = config39;
+var table_default = config38;
 var helpers30 = createMultiStyleConfigHelpers$1(tabsAnatomy.keys);
-var config40 = helpers30.defineMultiStyleConfig({
+var config39 = helpers30.defineMultiStyleConfig({
   baseStyle: (props) => ({
     root: {
       display: "flex",
@@ -14063,8 +13918,8 @@ var config40 = helpers30.defineMultiStyleConfig({
     variant: "base"
   }
 });
-var tabs_default = config40;
-var config41 = defineStyleConfig$1({
+var tabs_default = config39;
+var config40 = defineStyleConfig$1({
   baseStyle: (props) => ({
     ...input_default.baseStyle(props).field,
     minHeight: "5rem",
@@ -14081,8 +13936,8 @@ var config41 = defineStyleConfig$1({
     }
   })
 });
-var textarea_default = config41;
-var config42 = defineStyleConfig$1({
+var textarea_default = config40;
+var config41 = defineStyleConfig$1({
   baseStyle: {
     display: "flex",
     alignItems: "center",
@@ -14106,8 +13961,8 @@ var config42 = defineStyleConfig$1({
     }
   }
 });
-var toast_default = config42;
-var config43 = defineStyleConfig$1({
+var toast_default = config41;
+var config42 = defineStyleConfig$1({
   baseStyle: (props) => ({
     appearance: "none",
     border: "none",
@@ -14117,11 +13972,11 @@ var config43 = defineStyleConfig$1({
     borderRadius: "md",
     color: "text.default.light",
     ...focusVisibleStyles(props),
-    ...getColorSchemeBaseProps2(props)
+    ...getColorSchemeBaseProps(props)
   })
 });
-var static_card_default = config43;
-var getColorSchemeBaseProps2 = (props) => {
+var static_card_default = config42;
+var getColorSchemeBaseProps = (props) => {
   var _a6;
   switch (props.colorScheme) {
     case "white":
@@ -14166,7 +14021,7 @@ var getColorSchemeBaseProps2 = (props) => {
       };
   }
 };
-var config44 = defineStyleConfig$1({
+var config43 = defineStyleConfig$1({
   baseStyle: (props) => ({
     appearance: "none",
     border: "none",
@@ -14230,7 +14085,7 @@ var config44 = defineStyleConfig$1({
     })
   }
 });
-var pressable_card_default = config44;
+var pressable_card_default = config43;
 var fontFaces = `
 @font-face {
   font-family: ${tokens11__default.asset.font["vy-sans"]["light"].name};
@@ -14335,16 +14190,16 @@ var brandTheme = {
 };
 var BaseToast = ({ children, variant, id }) => {
   const styles3 = useStyleConfig("Toast", { variant });
-  return /* @__PURE__ */ React86__default.createElement(Flex, { sx: styles3, id }, /* @__PURE__ */ React86__default.createElement(ToastIcon, { variant }), children);
+  return /* @__PURE__ */ React84__default.createElement(Flex, { sx: styles3, id }, /* @__PURE__ */ React84__default.createElement(ToastIcon, { variant }), children);
 };
 var ToastIcon = ({ variant }) => {
   const Icon = getIcon3(variant);
   const { t: t2 } = useTranslation();
-  return /* @__PURE__ */ React86__default.createElement(
+  return /* @__PURE__ */ React84__default.createElement(
     Icon,
     {
       flexShrink: 0,
-      "aria-label": t2(texts26[variant]),
+      "aria-label": t2(texts27[variant]),
       marginRight: 1,
       marginY: 1.5,
       color: "darkGrey"
@@ -14361,7 +14216,7 @@ var getIcon3 = (variant) => {
       return ErrorOutline24Icon;
   }
 };
-var texts26 = createTexts({
+var texts27 = createTexts({
   info: {
     nb: "Informasjon",
     nn: "Informasjon",
@@ -14390,7 +14245,7 @@ var ActionToast = ({
   buttonText,
   id
 }) => {
-  return /* @__PURE__ */ React86__default.createElement(BaseToast, { variant, id }, /* @__PURE__ */ React86__default.createElement(Box, { marginRight: 2, flexGrow: "1" }, children), /* @__PURE__ */ React86__default.createElement(Button2, { variant: "tertiary", size: "sm", onClick }, buttonText));
+  return /* @__PURE__ */ React84__default.createElement(BaseToast, { variant, id }, /* @__PURE__ */ React84__default.createElement(Box, { marginRight: 2, flexGrow: "1" }, children), /* @__PURE__ */ React84__default.createElement(Button2, { variant: "tertiary", size: "sm", onClick }, buttonText));
 };
 var ClosableToast = ({
   children,
@@ -14400,18 +14255,18 @@ var ClosableToast = ({
 }) => {
   const styles3 = useMultiStyleConfig("Toast", { variant });
   const { t: t2 } = useTranslation();
-  return /* @__PURE__ */ React86__default.createElement(BaseToast, { variant, id }, /* @__PURE__ */ React86__default.createElement(Box, { flexGrow: "1" }, children), /* @__PURE__ */ React86__default.createElement(
+  return /* @__PURE__ */ React84__default.createElement(BaseToast, { variant, id }, /* @__PURE__ */ React84__default.createElement(Box, { flexGrow: "1" }, children), /* @__PURE__ */ React84__default.createElement(
     IconButton,
     {
       sx: styles3.dismissButton,
       variant: "ghost",
-      "aria-label": t2(texts27.dismiss),
-      icon: /* @__PURE__ */ React86__default.createElement(CloseFill18Icon, null),
+      "aria-label": t2(texts28.dismiss),
+      icon: /* @__PURE__ */ React84__default.createElement(CloseFill18Icon, null),
       onClick: onClose
     }
   ));
 };
-var texts27 = createTexts({
+var texts28 = createTexts({
   dismiss: {
     nb: "Lukk",
     nn: "Lukk",
@@ -14434,7 +14289,7 @@ var useToast = () => {
 };
 var getToastComponent = (opts) => {
   if ("isClosable" in opts && opts.isClosable) {
-    return ({ onClose, id }) => /* @__PURE__ */ React86__default.createElement(
+    return ({ onClose, id }) => /* @__PURE__ */ React84__default.createElement(
       ClosableToast,
       {
         id,
@@ -14450,7 +14305,7 @@ var getToastComponent = (opts) => {
     );
   }
   if ("buttonText" in opts) {
-    return ({ id }) => /* @__PURE__ */ React86__default.createElement(
+    return ({ id }) => /* @__PURE__ */ React84__default.createElement(
       ActionToast,
       {
         id,
@@ -14461,7 +14316,7 @@ var getToastComponent = (opts) => {
       opts.text
     );
   }
-  return ({ id }) => /* @__PURE__ */ React86__default.createElement(BaseToast, { id, variant: opts.variant }, opts.text);
+  return ({ id }) => /* @__PURE__ */ React84__default.createElement(BaseToast, { id, variant: opts.variant }, opts.text);
 };
 var Tooltip = ({
   children,
@@ -14474,7 +14329,7 @@ var Tooltip = ({
   withCloseButton = false,
   ...props
 }) => {
-  return /* @__PURE__ */ React86__default.createElement(
+  return /* @__PURE__ */ React84__default.createElement(
     Popover$1,
     {
       onClose,
@@ -14486,8 +14341,8 @@ var Tooltip = ({
       arrowShadowColor: "none",
       ...props
     },
-    /* @__PURE__ */ React86__default.createElement(PopoverTrigger, null, children),
-    /* @__PURE__ */ React86__default.createElement(PopoverContent, null, /* @__PURE__ */ React86__default.createElement(PopoverArrow, null), withCloseButton && /* @__PURE__ */ React86__default.createElement(PopoverCloseButton, null), /* @__PURE__ */ React86__default.createElement(PopoverBody, null, content))
+    /* @__PURE__ */ React84__default.createElement(PopoverTrigger, null, children),
+    /* @__PURE__ */ React84__default.createElement(PopoverContent, null, /* @__PURE__ */ React84__default.createElement(PopoverArrow, null), withCloseButton && /* @__PURE__ */ React84__default.createElement(PopoverCloseButton, null), /* @__PURE__ */ React84__default.createElement(PopoverBody, null, content))
   );
 };
 
@@ -14596,4 +14451,4 @@ function slugify(text, maxLength = 50) {
   return text.normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/[\u00C6\u00E6]/g, "ae").replace(/[\u00D8\u00F8]/g, "oe").replace(/[\u00C5\u00E5]/g, "aa").toLowerCase().replace(/\s+/g, "-").replace(/[^\w-]+/g, "").replace(/--+/g, "-").replace(/^-+/, "").replace(/-+$/, "").substring(0, maxLength);
 }
 
-export { Accordion, AttachedInputs, Badge, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button2 as Button, ButtonGroup, Card2 as Card, CardSelect, CargonetLogo, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, ColorInlineLoader, ColorSpinner, Combobox, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerContent, Expandable, ExpandableAlert, ExpandableItem, FloatingActionButton, FormControl, FormErrorMessage, FormLabel, FullScreenDrawer, Heading2 as Heading, IconButton, InfoSelect, InfoTag, Input, InputLeftElement2 as InputLeftElement, InputRightElement2 as InputRightElement, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightSpinner, LineIcon, ListBox, ModalHeader, NativeSelect, Nudge, NumericStepper, Pagination, PasswordInput, PhoneNumberInput, PlayPauseButton, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardGroupContext, RadioGroup, SearchInput, SimpleDrawer, Skeleton, SkeletonCircle, SkeletonText, SkipButton, SporProvider, Stack, StaticAlert, StaticCard, Stepper, StepperStep, Switch, Table, Tabs, Text4 as Text, TextLink, Textarea, TimePicker, Tooltip, TravelTag, VyLogo, VyLogoPride, WizardNudge, brandTheme, createTexts, fontFaces, slugify, theme, useSize, useToast, useTranslation };
+export { Accordion, AttachedInputs, Badge, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button2 as Button, ButtonGroup, CardSelect, CargonetLogo, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, ColorInlineLoader, ColorSpinner, Combobox, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerContent, Expandable, ExpandableAlert, ExpandableItem, FloatingActionButton, FormControl, FormErrorMessage, FormLabel, FullScreenDrawer, Heading2 as Heading, IconButton, InfoSelect, InfoTag, Input, InputLeftElement2 as InputLeftElement, InputRightElement2 as InputRightElement, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightSpinner, LineIcon, ListBox, ModalHeader, NativeSelect, Nudge, NumericStepper, Pagination, PasswordInput, PhoneNumberInput, PlayPauseButton, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardGroupContext, RadioGroup, SearchInput, SimpleDrawer, Skeleton, SkeletonCircle, SkeletonText, SkipButton, SporProvider, Stack, StaticAlert, StaticCard, Stepper, StepperStep, Switch, Table, Tabs, Text4 as Text, TextLink, Textarea, TimePicker, Tooltip, TravelTag, VyLogo, VyLogoPride, WizardNudge, brandTheme, createTexts, fontFaces, slugify, theme, useSize, useToast, useTranslation };