@vygruppen/spor-react 3.6.1 → 3.7.1

package/dist/{chunk-OSIIU3AM.mjs → chunk-IP63HI2Y.mjs}

@@ -1,5 +1,5 @@
 import { forwardRef, Divider as Divider$1, Stack as Stack$1, Accordion as Accordion$1, Skeleton as Skeleton$1, useButtonGroup, Button as Button$1, Box, Center, ButtonGroup as ButtonGroup$1, IconButton as IconButton$1, useStyleConfig, Badge as Badge$1, Code as Code$1, Text, useMultiStyleConfig, PopoverAnchor, FormLabel, Flex, useFormControlContext, useBreakpointValue, PopoverContent, PopoverArrow, PopoverBody, FocusLock, Popover, InputGroup, PopoverTrigger, Portal, chakra, Checkbox as Checkbox$1, useCheckbox, FormControl as FormControl$1, InputLeftElement, Input as Input$1, InputRightElement, Select, useDisclosure, useControllableState, Radio as Radio$1, RadioGroup as RadioGroup$1, Switch as Switch$1, Textarea as Textarea$1, 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, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, SkeletonCircle as SkeletonCircle$1, SkeletonText as SkeletonText$1, Breadcrumb as Breadcrumb$1, BreadcrumbItem as BreadcrumbItem$1, BreadcrumbLink as BreadcrumbLink$1, Heading as Heading$1, CheckboxGroup as CheckboxGroup$1, List, ListItem, useColorModeValue, useFormControlProps, useFormControl, Drawer as Drawer$1, DrawerOverlay, DrawerCloseButton, DrawerBody, usePopoverContext, DarkMode, PopoverCloseButton, ChakraProvider, HStack, 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, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalOverlay, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, ScaleFade, SimpleGrid, Slide, SlideFade, Spacer, Tab, TabList, TabPanel, TabPanels, TableCaption, Tbody, Td, Tfoot, Th, Thead, Tr, VStack, Wrap, WrapItem, extendTheme, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToken } 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, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, ScaleFade, SimpleGrid, Slide, SlideFade, Spacer, Tab, TabList, TabPanel, TabPanels, TableCaption, Tbody, Td, Tfoot, Th, Thead, Tr, UnorderedList, VStack, Wrap, WrapItem, extendTheme, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToken } from '@chakra-ui/react';
 import tokens10__default from '@vygruppen/spor-design-tokens';
 import * as tokens10 from '@vygruppen/spor-design-tokens';
 export { tokens10 as tokens };
@@ -1425,8 +1425,8 @@ var texts5 = createTexts({
   }
 });
 var BaseAlert = ({ variant, children, ...boxProps }) => {
-  const styles2 = useMultiStyleConfig("Alert", { variant });
-  return /* @__PURE__ */ React50__default.createElement(Box, { __css: styles2.container, ...boxProps }, children);
+  const styles3 = useMultiStyleConfig("Alert", { variant });
+  return /* @__PURE__ */ React50__default.createElement(Box, { __css: styles3.container, ...boxProps }, children);
 };
 
 // src/alert/ClosableAlert.tsx
@@ -1437,7 +1437,7 @@ var ClosableAlert = ({
   }
 }) => {
   const { isOpen, onClose } = useDisclosure({ defaultIsOpen: true });
-  const styles2 = useMultiStyleConfig("Alert", { variant });
+  const styles3 = useMultiStyleConfig("Alert", { variant });
   const { t: t2 } = useTranslation();
   if (!isOpen) {
     return null;
@@ -1454,7 +1454,7 @@ var ClosableAlert = ({
       onClick: handleClose,
       icon: /* @__PURE__ */ React50__default.createElement(CloseFill18Icon, null),
       "aria-label": t2(texts6.close),
-      sx: styles2.closeButton
+      sx: styles3.closeButton
     }
   ), /* @__PURE__ */ React50__default.createElement(AlertIcon, { variant }), children);
 };
@@ -1525,11 +1525,11 @@ var BreadcrumbItem = BreadcrumbItem$1;
 var BreadcrumbLink = BreadcrumbLink$1;
 var Card = forwardRef(
   ({ size: size2 = "sm", colorScheme = "white", children, ...props }, ref) => {
-    const styles2 = useStyleConfig("Card", {
+    const styles3 = useStyleConfig("Card", {
       colorScheme,
       size: size2
     });
-    return /* @__PURE__ */ React50__default.createElement(Box, { __css: styles2, ...props, ref }, children);
+    return /* @__PURE__ */ React50__default.createElement(Box, { __css: styles3, ...props, ref }, children);
   }
 );
 function $458b0a5536c1a7cf$export$40bfa8c7b0832715(value, defaultValue, onChange) {
@@ -3299,7 +3299,7 @@ function CalendarCell({ state: state2, date, currentMonth }) {
     isOutsideVisibleRange
   } = useCalendarCell({ date }, state2, ref);
   const isOutsideMonth = !isSameMonth(currentMonth, date);
-  const styles2 = useMultiStyleConfig("Datepicker", {});
+  const styles3 = useMultiStyleConfig("Datepicker", {});
   const stateProps = {};
   if (isSelected) {
     stateProps["data-selected"] = true;
@@ -3354,7 +3354,7 @@ function CalendarCell({ state: state2, date, currentMonth }) {
         ...buttonProps,
         ...stateProps,
         ref,
-        sx: styles2.dateCell,
+        sx: styles3.dateCell,
         hidden: isOutsideVisibleRange,
         width: "100%"
       },
@@ -3404,14 +3404,14 @@ function CalendarGrid({ state: state2, offset = {} }) {
   );
   const weeksInMonth = getWeeksInMonth(state2.visibleRange.start, locale);
   const weeksInMonthRange = new Array(weeksInMonth).fill(0).map((_, i) => i);
-  const styles2 = useMultiStyleConfig("Datepicker", {});
+  const styles3 = useMultiStyleConfig("Datepicker", {});
   return /* @__PURE__ */ React50__default.createElement("table", { ...gridProps }, /* @__PURE__ */ React50__default.createElement("thead", { ...headerProps }, /* @__PURE__ */ React50__default.createElement("tr", null, weekDays[language].map((day, index) => {
     return /* @__PURE__ */ React50__default.createElement(
       Text4,
       {
         as: "th",
         key: index,
-        sx: index < 5 ? styles2.weekdays : styles2.weekend,
+        sx: index < 5 ? styles3.weekdays : styles3.weekend,
         variant: "sm"
       },
       day
@@ -3582,7 +3582,7 @@ var texts8 = createTexts({
 var CalendarTriggerButton = forwardRef(
   ({ ...buttonProps }, ref) => {
     const { t: t2 } = useTranslation();
-    const styles2 = useMultiStyleConfig("Datepicker", {});
+    const styles3 = useMultiStyleConfig("Datepicker", {});
     const { onPress, ...filteredButtonProps } = buttonProps;
     const handleOnPress = (event) => {
       if (onPress) {
@@ -3597,7 +3597,7 @@ var CalendarTriggerButton = forwardRef(
         as: "button",
         type: "button",
         "aria-label": t2(texts9.openCalendar),
-        sx: styles2.calendarTriggerButton,
+        sx: styles3.calendarTriggerButton,
         ...filteredButtonProps,
         onKeyUp: handleOnPress
       },
@@ -3622,7 +3622,7 @@ var DateTimeSegment = forwardRef$1(
       state2,
       ref
     );
-    const styles2 = useMultiStyleConfig("Datepicker", {
+    const styles3 = useMultiStyleConfig("Datepicker", {
       isPlaceholder: segment.isPlaceholder,
       isEditable: segment.isEditable
     });
@@ -3633,15 +3633,15 @@ var DateTimeSegment = forwardRef$1(
         ref,
         style: {
           ...segmentProps.style,
-          fontVariantNumeric: "tabular-nums",
           boxSizing: "content-box"
         },
         paddingX: "1px",
-        textAlign: "end",
+        textAlign: "center",
         outline: "none",
         borderRadius: "xs",
         fontSize: ["mobile.sm", "desktop.sm"],
-        sx: styles2.dateTimeSegment,
+        minWidth: isPaddable(segment.type) ? "1.3em" : "auto",
+        sx: styles3.dateTimeSegment,
         _focus: {
           backgroundColor: "darkTeal",
           color: "white"
@@ -3666,7 +3666,7 @@ var DateField = forwardRef$1(
   (props, externalRef) => {
     var _a6;
     const locale = useCurrentLocale();
-    const styles2 = useMultiStyleConfig("Datepicker", {});
+    const styles3 = useMultiStyleConfig("Datepicker", {});
     const state2 = $3c0fc76039f1c516$export$60e84778edff6d26({
       ...props,
       locale,
@@ -3684,7 +3684,7 @@ var DateField = forwardRef$1(
       {
         ...props.labelProps,
         ...labelProps,
-        sx: styles2.inputLabel,
+        sx: styles3.inputLabel,
         position: "absolute",
         paddingTop: "2px"
       },
@@ -3712,12 +3712,12 @@ var StyledField = forwardRef(
     const { isInvalid } = useFormControlContext() ?? {
       isInvalid: false
     };
-    const styles2 = useMultiStyleConfig("Datepicker", { variant });
+    const styles3 = useMultiStyleConfig("Datepicker", { variant });
     return /* @__PURE__ */ React50__default.createElement(
       Box,
       {
         ...otherProps,
-        __css: styles2.wrapper,
+        __css: styles3.wrapper,
         ref,
         "aria-invalid": isInvalid
       },
@@ -3760,7 +3760,7 @@ var DatePicker = forwardRef$1(
       state2,
       ref
     );
-    const styles2 = useMultiStyleConfig("Datepicker", {});
+    const styles3 = useMultiStyleConfig("Datepicker", {});
     const locale = useCurrentLocale();
     const responsiveVariant = useBreakpointValue(typeof variant === "string" ? [variant] : variant) ?? "simple";
     const hasTrigger = responsiveVariant === "with-trigger";
@@ -3769,7 +3769,7 @@ var DatePicker = forwardRef$1(
         state2.setOpen(true);
       }
     };
-    const popoverContent = /* @__PURE__ */ React50__default.createElement(PopoverContent, { color: "darkGrey", boxShadow: "md", sx: styles2.calendar }, /* @__PURE__ */ React50__default.createElement(PopoverArrow, { sx: styles2.arrow }), /* @__PURE__ */ React50__default.createElement(PopoverBody, null, /* @__PURE__ */ React50__default.createElement(FocusLock, null, /* @__PURE__ */ React50__default.createElement(
+    const popoverContent = /* @__PURE__ */ React50__default.createElement(PopoverContent, { color: "darkGrey", boxShadow: "md", sx: styles3.calendar }, /* @__PURE__ */ React50__default.createElement(PopoverArrow, { sx: styles3.arrow }), /* @__PURE__ */ React50__default.createElement(PopoverBody, null, /* @__PURE__ */ React50__default.createElement(FocusLock, null, /* @__PURE__ */ React50__default.createElement(
       Calendar,
       {
         ...calendarProps,
@@ -3859,7 +3859,7 @@ function DateRangePicker({
     calendarProps
   } = useDateRangePicker(props, state2, ref);
   const responsiveVariant = useBreakpointValue(typeof variant === "string" ? [variant] : variant) ?? "simple";
-  const styles2 = useMultiStyleConfig("Datepicker", {
+  const styles3 = useMultiStyleConfig("Datepicker", {
     variant: responsiveVariant
   });
   const locale = useCurrentLocale();
@@ -3875,8 +3875,8 @@ function DateRangePicker({
     }
   };
   const hasTrigger = responsiveVariant === "with-trigger";
-  const popoverContent = /* @__PURE__ */ React50__default.createElement(PopoverContent, { sx: styles2.calendar, boxShadow: "md", maxWidth: "none" }, /* @__PURE__ */ React50__default.createElement(PopoverArrow, { sx: styles2.arrow }), /* @__PURE__ */ React50__default.createElement(PopoverBody, null, /* @__PURE__ */ React50__default.createElement(FocusLock, null, /* @__PURE__ */ React50__default.createElement(RangeCalendar, { ...calendarProps }))));
-  return /* @__PURE__ */ React50__default.createElement(I18nProvider, { locale }, /* @__PURE__ */ React50__default.createElement(Box, { position: "relative", display: "inline-flex", flexDirection: "column" }, props.label && /* @__PURE__ */ React50__default.createElement(FormLabel, { ...labelProps, sx: styles2.inputLabel }, props.label), /* @__PURE__ */ React50__default.createElement(
+  const popoverContent = /* @__PURE__ */ React50__default.createElement(PopoverContent, { sx: styles3.calendar, boxShadow: "md", maxWidth: "none" }, /* @__PURE__ */ React50__default.createElement(PopoverArrow, { sx: styles3.arrow }), /* @__PURE__ */ React50__default.createElement(PopoverBody, null, /* @__PURE__ */ React50__default.createElement(FocusLock, null, /* @__PURE__ */ React50__default.createElement(RangeCalendar, { ...calendarProps }))));
+  return /* @__PURE__ */ React50__default.createElement(I18nProvider, { locale }, /* @__PURE__ */ React50__default.createElement(Box, { position: "relative", display: "inline-flex", flexDirection: "column" }, props.label && /* @__PURE__ */ React50__default.createElement(FormLabel, { ...labelProps, sx: styles3.inputLabel }, props.label), /* @__PURE__ */ React50__default.createElement(
     Popover,
     {
       ...dialogProps,
@@ -4205,7 +4205,7 @@ var CardSelect = forwardRef(
       triggerRef
     );
     const { buttonProps } = useButton(triggerProps, triggerRef);
-    const styles2 = useMultiStyleConfig("CardSelect", { variant, size: size2 });
+    const styles3 = useMultiStyleConfig("CardSelect", { variant, size: size2 });
     useForceRerender(state2.isOpen);
     const ChevronIcon = size2 === "sm" ? DropdownDownFill18Icon : DropdownDownFill24Icon;
     return /* @__PURE__ */ React50__default.createElement(Box, { ...props }, /* @__PURE__ */ React50__default.createElement(
@@ -4213,7 +4213,7 @@ var CardSelect = forwardRef(
       {
         type: "button",
         ref: triggerRef,
-        sx: styles2.trigger,
+        sx: styles3.trigger,
         ...buttonProps,
         width,
         "data-attachable": true
@@ -4238,7 +4238,7 @@ var CardSelect = forwardRef(
         {
           colorScheme: "white",
           size: "lg",
-          sx: styles2.card,
+          sx: styles3.card,
           ...overlayProps
         },
         /* @__PURE__ */ React50__default.createElement(Dialog, { "aria-label": label }, children)
@@ -4276,7 +4276,7 @@ var ChoiceChip = forwardRef((props, ref) => {
     getRootProps,
     getLabelProps
   } = useCheckbox(props);
-  const styles2 = useMultiStyleConfig("ChoiceChip", {
+  const styles3 = useMultiStyleConfig("ChoiceChip", {
     size: size2,
     variant,
     icon,
@@ -4295,13 +4295,13 @@ var ChoiceChip = forwardRef((props, ref) => {
       chakra.div,
       {
         ...getLabelProps(),
-        __css: styles2.container,
+        __css: styles3.container,
         "data-checked": dataAttr(state2.isChecked),
         "data-hover": dataAttr(state2.isHovered),
         "data-focus": dataAttr(state2.isFocused)
       },
-      icon && /* @__PURE__ */ React50__default.createElement(chakra.span, { __css: styles2.icon }, state2.isChecked ? icon.checked : icon.default),
-      /* @__PURE__ */ React50__default.createElement(chakra.span, { __css: styles2.label, ...getCheckboxProps() }, variant !== "icon" && children),
+      icon && /* @__PURE__ */ React50__default.createElement(chakra.span, { __css: styles3.icon }, state2.isChecked ? icon.checked : icon.default),
+      /* @__PURE__ */ React50__default.createElement(chakra.span, { __css: styles3.label, ...getCheckboxProps() }, variant !== "icon" && children),
       variant === "filter" && state2.isChecked && /* @__PURE__ */ React50__default.createElement(CloseOutline24Icon, { marginLeft: 1.5 })
     )
   );
@@ -4513,13 +4513,13 @@ function ListBox({
   ...props
 }) {
   const { listBoxProps } = useListBox(props, state2, listBoxRef);
-  const styles2 = useMultiStyleConfig("ListBox", {});
+  const styles3 = useMultiStyleConfig("ListBox", {});
   return /* @__PURE__ */ React50__default.createElement(
     List,
     {
       ...listBoxProps,
       ref: listBoxRef,
-      sx: styles2.container,
+      sx: styles3.container,
       "aria-busy": isLoading,
       maxWidth
     },
@@ -4531,13 +4531,13 @@ function ListBox({
 }
 function ItemLabel({ children }) {
   let { labelProps } = useOptionContext();
-  const styles2 = useMultiStyleConfig("ListBox", {});
-  return /* @__PURE__ */ React50__default.createElement(Box, { ...labelProps, sx: styles2.label }, children);
+  const styles3 = useMultiStyleConfig("ListBox", {});
+  return /* @__PURE__ */ React50__default.createElement(Box, { ...labelProps, sx: styles3.label }, children);
 }
 function ItemDescription({ children }) {
   let { descriptionProps } = useOptionContext();
-  const styles2 = useMultiStyleConfig("ListBox", {});
-  return /* @__PURE__ */ React50__default.createElement(Box, { ...descriptionProps, sx: styles2.description }, children);
+  const styles3 = useMultiStyleConfig("ListBox", {});
+  return /* @__PURE__ */ React50__default.createElement(Box, { ...descriptionProps, sx: styles3.description }, children);
 }
 function Option({ item, state: state2 }) {
   const ref = useRef(null);
@@ -4549,7 +4549,7 @@ function Option({ item, state: state2 }) {
     labelProps,
     descriptionProps
   } = useOption({ key: item.key }, state2, ref);
-  const styles2 = useMultiStyleConfig("ListBox", {});
+  const styles3 = useMultiStyleConfig("ListBox", {});
   let dataFields = {};
   if (isSelected) {
     dataFields["data-selected"] = true;
@@ -4570,7 +4570,7 @@ function Option({ item, state: state2 }) {
       { passive: false, once: true }
     );
   }, []);
-  return /* @__PURE__ */ React50__default.createElement(OptionContext.Provider, { value: { labelProps, descriptionProps } }, /* @__PURE__ */ React50__default.createElement(ListItem, { ...optionProps, ...dataFields, ref, sx: styles2.item }, item.rendered));
+  return /* @__PURE__ */ React50__default.createElement(OptionContext.Provider, { value: { labelProps, descriptionProps } }, /* @__PURE__ */ React50__default.createElement(ListItem, { ...optionProps, ...dataFields, ref, sx: styles3.item }, item.rendered));
 }
 var OptionContext = React50__default.createContext({
   labelProps: {},
@@ -4629,14 +4629,14 @@ function InfoSelect({
     state2,
     triggerRef
   );
-  const styles2 = useMultiStyleConfig("InfoSelect", {
+  const styles3 = useMultiStyleConfig("InfoSelect", {
     isOpen: state2.isOpen,
     isLabelSrOnly
   });
   const { buttonProps } = useButton(triggerProps, triggerRef);
   const { t: t2 } = useTranslation();
   const formControl = useFormControlProps(props);
-  return /* @__PURE__ */ React50__default.createElement(Box, { sx: styles2.container }, /* @__PURE__ */ React50__default.createElement(chakra.div, { ...labelProps, sx: styles2.label }, props.label), /* @__PURE__ */ React50__default.createElement(
+  return /* @__PURE__ */ React50__default.createElement(Box, { sx: styles3.container }, /* @__PURE__ */ React50__default.createElement(chakra.div, { ...labelProps, sx: styles3.label }, props.label), /* @__PURE__ */ React50__default.createElement(
     HiddenSelect,
     {
       state: state2,
@@ -4649,7 +4649,7 @@ function InfoSelect({
     {
       type: "button",
       ref: triggerRef,
-      sx: styles2.button,
+      sx: styles3.button,
       ...buttonProps,
       width,
       height,
@@ -4658,7 +4658,7 @@ function InfoSelect({
       "aria-describedby": formControl["aria-describedby"]
     },
     /* @__PURE__ */ React50__default.createElement(Box, { ...valueProps }, state2.selectedItem ? state2.selectedItem.textValue ?? state2.selectedItem.rendered : placeholder ?? t2(texts11.selectAnOption)),
-    /* @__PURE__ */ React50__default.createElement(Box, { sx: styles2.arrowIcon }, state2.isOpen ? /* @__PURE__ */ React50__default.createElement(DropdownUpFill24Icon, null) : /* @__PURE__ */ React50__default.createElement(DropdownDownFill24Icon, null))
+    /* @__PURE__ */ React50__default.createElement(Box, { sx: styles3.arrowIcon }, state2.isOpen ? /* @__PURE__ */ React50__default.createElement(DropdownUpFill24Icon, null) : /* @__PURE__ */ React50__default.createElement(DropdownDownFill24Icon, null))
   ), state2.isOpen && /* @__PURE__ */ React50__default.createElement(
     Popover3,
     {
@@ -4713,13 +4713,13 @@ var InputRightElement2 = forwardRef(
 );
 var NativeSelect = forwardRef(
   ({ label, ...props }, ref) => {
-    const styles2 = useMultiStyleConfig("Select", props);
+    const styles3 = useMultiStyleConfig("Select", props);
     return /* @__PURE__ */ React50__default.createElement(FormControl, null, /* @__PURE__ */ React50__default.createElement(
       Select,
       {
         "data-attachable": true,
         ...props,
-        rootProps: { __css: styles2.root },
+        rootProps: { __css: styles3.root },
         ref
       }
     ), label && /* @__PURE__ */ React50__default.createElement(FormLabel3, null, label));
@@ -5083,7 +5083,7 @@ var texts14 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React50__default.lazy(() => import('./CountryCodeSelect-SXVHRDQC.mjs'));
+var LazyCountryCodeSelect = React50__default.lazy(() => import('./CountryCodeSelect-3P7RFAM2.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React50__default.createElement(Radio$1, { ...props, ref });
 });
@@ -5271,12 +5271,12 @@ var LineIcon = ({
   sx,
   ...rest
 }) => {
-  const styles2 = useMultiStyleConfig("LineIcon", { variant, size: size2 });
+  const styles3 = useMultiStyleConfig("LineIcon", { variant, size: size2 });
   const Icon = getCorrectIcon({ variant, size: size2 });
   if (!Icon) {
     return null;
   }
-  return /* @__PURE__ */ React50__default.createElement(Box, { sx: { ...styles2.iconContainer, ...sx }, ...rest }, /* @__PURE__ */ React50__default.createElement(Icon, { sx: styles2.icon }));
+  return /* @__PURE__ */ React50__default.createElement(Box, { sx: { ...styles3.iconContainer, ...sx }, ...rest }, /* @__PURE__ */ React50__default.createElement(Icon, { sx: styles3.icon }));
 };
 
 // src/linjetag/InfoTag.tsx
@@ -5286,8 +5286,8 @@ var InfoTag = ({
   title,
   description
 }) => {
-  const styles2 = useMultiStyleConfig("InfoTag", { variant, size: size2 });
-  return /* @__PURE__ */ React50__default.createElement(Box, { sx: styles2.container }, /* @__PURE__ */ React50__default.createElement(LineIcon, { variant, size: size2, sx: styles2.iconContainer }), /* @__PURE__ */ React50__default.createElement(Box, { sx: styles2.textContainer }, title && /* @__PURE__ */ React50__default.createElement(Box, { as: "span", sx: styles2.title }, title), title && description && " ", description && /* @__PURE__ */ React50__default.createElement(Box, { as: "span", sx: styles2.description }, description)));
+  const styles3 = useMultiStyleConfig("InfoTag", { variant, size: size2 });
+  return /* @__PURE__ */ React50__default.createElement(Box, { sx: styles3.container }, /* @__PURE__ */ React50__default.createElement(LineIcon, { variant, size: size2, sx: styles3.iconContainer }), /* @__PURE__ */ React50__default.createElement(Box, { sx: styles3.textContainer }, title && /* @__PURE__ */ React50__default.createElement(Box, { as: "span", sx: styles3.title }, title), title && description && " ", description && /* @__PURE__ */ React50__default.createElement(Box, { as: "span", sx: styles3.description }, description)));
 };
 var TravelTag = forwardRef(
   ({
@@ -5299,13 +5299,13 @@ var TravelTag = forwardRef(
     isDisabled,
     ...rest
   }, ref) => {
-    const styles2 = useMultiStyleConfig("TravelTag", {
+    const styles3 = useMultiStyleConfig("TravelTag", {
       variant,
       size: size2,
       deviationLevel
     });
     const DeviationLevelIcon = getDeviationLevelIcon({ deviationLevel, size: size2 });
-    return /* @__PURE__ */ React50__default.createElement(Box, { sx: styles2.container, "aria-disabled": isDisabled, ref, ...rest }, /* @__PURE__ */ React50__default.createElement(LineIcon, { variant, size: size2, sx: styles2.iconContainer }), /* @__PURE__ */ React50__default.createElement(Box, { sx: styles2.textContainer }, title && /* @__PURE__ */ React50__default.createElement(Box, { as: "span", sx: styles2.title }, title), title && description && " ", description && /* @__PURE__ */ React50__default.createElement(Box, { as: "span", sx: styles2.description }, description)), DeviationLevelIcon && /* @__PURE__ */ React50__default.createElement(DeviationLevelIcon, { sx: styles2.deviationIcon }));
+    return /* @__PURE__ */ React50__default.createElement(Box, { sx: styles3.container, "aria-disabled": isDisabled, ref, ...rest }, /* @__PURE__ */ React50__default.createElement(LineIcon, { variant, size: size2, sx: styles3.iconContainer }), /* @__PURE__ */ React50__default.createElement(Box, { sx: styles3.textContainer }, title && /* @__PURE__ */ React50__default.createElement(Box, { as: "span", sx: styles3.title }, title), title && description && " ", description && /* @__PURE__ */ React50__default.createElement(Box, { as: "span", sx: styles3.description }, description)), DeviationLevelIcon && /* @__PURE__ */ React50__default.createElement(DeviationLevelIcon, { sx: styles3.deviationIcon }));
   }
 );
 var getDeviationLevelIcon = ({
@@ -5531,7 +5531,7 @@ var JumpButton = ({
   ...props
 }) => {
   const { t: t2 } = useTranslation();
-  const styles2 = useMultiStyleConfig("MediaControllerButton", {
+  const styles3 = useMultiStyleConfig("MediaControllerButton", {
     variant: "jumpSkip",
     size: size2
   });
@@ -5539,12 +5539,12 @@ var JumpButton = ({
     Center,
     {
       as: "button",
-      sx: styles2.container,
+      sx: styles3.container,
       "aria-label": direction2 === "forward" ? t2(texts17.forward) : t2(texts17.backward),
       disabled: isDisabled,
       ...props
     },
-    direction2 === "forward" ? /* @__PURE__ */ React50__default.createElement(JumpForwardIcon, { sx: styles2.icon }) : /* @__PURE__ */ React50__default.createElement(JumpBackwardIcon, { sx: styles2.icon })
+    direction2 === "forward" ? /* @__PURE__ */ React50__default.createElement(JumpForwardIcon, { sx: styles3.icon }) : /* @__PURE__ */ React50__default.createElement(JumpBackwardIcon, { sx: styles3.icon })
   );
 };
 var texts17 = createTexts({
@@ -5568,7 +5568,7 @@ var PlayPauseButton = ({
   ...props
 }) => {
   const { t: t2 } = useTranslation();
-  const styles2 = useMultiStyleConfig("MediaControllerButton", {
+  const styles3 = useMultiStyleConfig("MediaControllerButton", {
     variant: "play",
     size: size2
   });
@@ -5576,12 +5576,12 @@ var PlayPauseButton = ({
     Center,
     {
       as: "button",
-      sx: styles2.container,
+      sx: styles3.container,
       "aria-label": isPlaying ? t2(texts18.pause) : t2(texts18.play),
       disabled: isDisabled,
       ...props
     },
-    isPlaying ? /* @__PURE__ */ React50__default.createElement(PauseIcon, { sx: styles2.icon }) : /* @__PURE__ */ React50__default.createElement(PlayIcon, { sx: styles2.icon })
+    isPlaying ? /* @__PURE__ */ React50__default.createElement(PauseIcon, { sx: styles3.icon }) : /* @__PURE__ */ React50__default.createElement(PlayIcon, { sx: styles3.icon })
   );
 };
 var texts18 = createTexts({
@@ -5605,7 +5605,7 @@ var SkipButton = ({
   ...props
 }) => {
   const { t: t2 } = useTranslation();
-  const styles2 = useMultiStyleConfig("MediaControllerButton", {
+  const styles3 = useMultiStyleConfig("MediaControllerButton", {
     variant: "jumpSkip",
     size: size2
   });
@@ -5613,12 +5613,12 @@ var SkipButton = ({
     Center,
     {
       as: "button",
-      sx: styles2.container,
+      sx: styles3.container,
       "aria-label": direction2 === "forward" ? t2(texts19.next) : t2(texts19.previous),
       disabled: isDisabled,
       ...props
     },
-    direction2 === "forward" ? /* @__PURE__ */ React50__default.createElement(SkipNextIcon, { sx: styles2.icon }) : /* @__PURE__ */ React50__default.createElement(SkipPreviousIcon, { sx: styles2.icon })
+    direction2 === "forward" ? /* @__PURE__ */ React50__default.createElement(SkipNextIcon, { sx: styles3.icon }) : /* @__PURE__ */ React50__default.createElement(SkipPreviousIcon, { sx: styles3.icon })
   );
 };
 var texts19 = createTexts({
@@ -5637,11 +5637,11 @@ var texts19 = createTexts({
 });
 var ModalHeader = forwardRef(
   ({ size: size2, ...props }, ref) => {
-    const styles2 = {
+    const styles3 = {
       fontSize: size2 === "lg" ? ["mobile.lg", "desktop.lg"] : ["mobile.md", "desktop.md"],
       textAlign: size2 === "lg" ? "center" : "left"
     };
-    return /* @__PURE__ */ React50__default.createElement(ModalHeader$1, { ...props, ref, ...styles2 });
+    return /* @__PURE__ */ React50__default.createElement(ModalHeader$1, { ...props, ref, ...styles3 });
   }
 );
 
@@ -5829,15 +5829,7 @@ var SporProvider = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ React50__default.createElement(LanguageProvider, { language }, /* @__PURE__ */ React50__default.createElement(ChakraProvider, { theme: theme3, ...props }, /* @__PURE__ */ React50__default.createElement(Global, { styles: fontFaces }), /* @__PURE__ */ React50__default.createElement(
-    Global,
-    {
-      styles: `
-          html, body { color: ${theme3.colors.darkGrey}; }
-          svg { display: initial; }
-          `
-    }
-  ), children));
+  return /* @__PURE__ */ React50__default.createElement(LanguageProvider, { language }, /* @__PURE__ */ React50__default.createElement(ChakraProvider, { theme: theme3, ...props }, /* @__PURE__ */ React50__default.createElement(Global, { styles: fontFaces }), children));
 };
 var StepperContext = React50__default.createContext(null);
 var StepperProvider = ({
@@ -7138,11 +7130,11 @@ var srFocusable = {
   overflow: "visible",
   whiteSpace: "normal"
 };
-var getWithPriority = (theme3, key, styles2) => {
+var getWithPriority = (theme3, key, styles3) => {
   const result = {};
   const obj = memoizedGet(theme3, key, {});
   for (const prop in obj) {
-    const isInStyles = prop in styles2 && styles2[prop] != null;
+    const isInStyles = prop in styles3 && styles3[prop] != null;
     if (!isInStyles)
       result[prop] = obj[prop];
   }
@@ -7160,15 +7152,15 @@ var others = {
   },
   layerStyle: {
     processResult: true,
-    transform: (value, theme3, styles2) => getWithPriority(theme3, `layerStyles.${value}`, styles2)
+    transform: (value, theme3, styles3) => getWithPriority(theme3, `layerStyles.${value}`, styles3)
   },
   textStyle: {
     processResult: true,
-    transform: (value, theme3, styles2) => getWithPriority(theme3, `textStyles.${value}`, styles2)
+    transform: (value, theme3, styles3) => getWithPriority(theme3, `textStyles.${value}`, styles3)
   },
   apply: {
     processResult: true,
-    transform: (value, theme3, styles2) => getWithPriority(theme3, value, styles2)
+    transform: (value, theme3, styles3) => getWithPriority(theme3, value, styles3)
   }
 };
 var position = {
@@ -7536,8 +7528,8 @@ var systemProps = (0, import_lodash3.default)(
 Object.assign({}, space, layout, flexbox, grid, position);
 [...Object.keys(systemProps), ...pseudoPropNames];
 ({ ...systemProps, ...pseudoSelectors });
-function defineStyle(styles2) {
-  return styles2;
+function defineStyle(styles3) {
+  return styles3;
 }
 function defineStyleConfig(config37) {
   return config37;
@@ -10846,6 +10838,7 @@ __export(foundations_exports, {
   sizes: () => sizes24,
   space: () => space2,
   spacing: () => spacing2,
+  styles: () => styles2,
   textStyles: () => textStyles,
   zIndices: () => zIndices2
 });
@@ -10874,9 +10867,9 @@ var config2 = {
   useSystemColorMode: false
 };
 var fonts = {
-  body: tokens10__default.font.family.body,
-  heading: tokens10__default.font.family.heading,
-  mono: tokens10__default.font.family.monospace
+  body: `${tokens10__default.font.family.body}, sans-serif`,
+  heading: `${tokens10__default.font.family.heading}, sans-serif`,
+  mono: `${tokens10__default.font.family.monospace}, monospace`
 };
 var fontSizes = {
   "2xs": tokens10__default.size.font.xs.mobile,
@@ -11052,6 +11045,16 @@ var zIndices2 = {
   toast: tokens10__default.depth["z-index"].toast,
   tooltip: tokens10__default.depth["z-index"].tooltip
 };
+var styles2 = {
+  global: (props) => ({
+    "html, body": {
+      color: mode("darkGrey", "lightGrey")(props)
+    },
+    svg: {
+      display: "initial"
+    }
+  })
+};
 
 // src/theme/components/accordion.ts
 var helpers = createMultiStyleConfigHelpers(accordionAnatomy.keys);
@@ -11279,12 +11282,12 @@ var config5 = defineStyleConfig$1({
 });
 var badge_default = config5;
 function getColorScheme(colorScheme) {
-  let styles2 = colorCombinations[colorScheme];
-  if (!styles2 && process.env.NODE_ENV === "development") {
+  let styles3 = colorCombinations[colorScheme];
+  if (!styles3 && process.env.NODE_ENV === "development") {
     console.warn(`Invalid color scheme ${colorScheme} provided.`);
-    styles2 = colorCombinations.grey;
+    styles3 = colorCombinations.grey;
   }
-  return styles2;
+  return styles3;
 }
 var colorCombinations = {
   yellow: {
@@ -14750,8 +14753,8 @@ var theme = {
   }
 };
 var BaseToast = ({ children, variant, id }) => {
-  const styles2 = useStyleConfig("Toast", { variant });
-  return /* @__PURE__ */ React50__default.createElement(Flex, { sx: styles2, id }, /* @__PURE__ */ React50__default.createElement(ToastIcon, { variant }), children);
+  const styles3 = useStyleConfig("Toast", { variant });
+  return /* @__PURE__ */ React50__default.createElement(Flex, { sx: styles3, id }, /* @__PURE__ */ React50__default.createElement(ToastIcon, { variant }), children);
 };
 var ToastIcon = ({ variant }) => {
   const Icon = getIcon3(variant);
@@ -14814,12 +14817,12 @@ var ClosableToast = ({
   variant,
   id
 }) => {
-  const styles2 = useMultiStyleConfig("Toast", { variant });
+  const styles3 = useMultiStyleConfig("Toast", { variant });
   const { t: t2 } = useTranslation();
   return /* @__PURE__ */ React50__default.createElement(BaseToast, { variant, id }, /* @__PURE__ */ React50__default.createElement(Box, { flexGrow: "1" }, children), /* @__PURE__ */ React50__default.createElement(
     IconButton,
     {
-      sx: styles2.dismissButton,
+      sx: styles3.dismissButton,
       variant: "ghost",
       "aria-label": t2(texts23.dismiss),
       icon: /* @__PURE__ */ React50__default.createElement(CloseFill18Icon, null),