@vygruppen/spor-react 3.6.1 → 3.7.1

package/dist/index.js

@@ -945,8 +945,8 @@ var BaseAlert;
 var init_BaseAlert = __esm({
   "src/alert/BaseAlert.tsx"() {
     BaseAlert = ({ variant, children, ...boxProps }) => {
-      const styles2 = react.useMultiStyleConfig("Alert", { variant });
-      return /* @__PURE__ */ React50__namespace.default.createElement(react.Box, { __css: styles2.container, ...boxProps }, children);
+      const styles3 = react.useMultiStyleConfig("Alert", { variant });
+      return /* @__PURE__ */ React50__namespace.default.createElement(react.Box, { __css: styles3.container, ...boxProps }, children);
     };
   }
 });
@@ -964,7 +964,7 @@ var init_ClosableAlert = __esm({
       }
     }) => {
       const { isOpen, onClose } = react.useDisclosure({ defaultIsOpen: true });
-      const styles2 = react.useMultiStyleConfig("Alert", { variant });
+      const styles3 = react.useMultiStyleConfig("Alert", { variant });
       const { t: t2 } = useTranslation();
       if (!isOpen) {
         return null;
@@ -981,7 +981,7 @@ var init_ClosableAlert = __esm({
           onClick: handleClose,
           icon: /* @__PURE__ */ React50__namespace.default.createElement(sporIconReact.CloseFill18Icon, null),
           "aria-label": t2(texts6.close),
-          sx: styles2.closeButton
+          sx: styles3.closeButton
         }
       ), /* @__PURE__ */ React50__namespace.default.createElement(AlertIcon, { variant }), children);
     };
@@ -1093,11 +1093,11 @@ var init_Card = __esm({
     init_layout();
     exports.Card = react.forwardRef(
       ({ size: size2 = "sm", colorScheme = "white", children, ...props }, ref) => {
-        const styles2 = react.useStyleConfig("Card", {
+        const styles3 = react.useStyleConfig("Card", {
           colorScheme,
           size: size2
         });
-        return /* @__PURE__ */ React50__namespace.default.createElement(react.Box, { __css: styles2, ...props, ref }, children);
+        return /* @__PURE__ */ React50__namespace.default.createElement(react.Box, { __css: styles3, ...props, ref }, children);
       }
     );
   }
@@ -2929,7 +2929,7 @@ function CalendarCell({ state: state2, date: date$1, currentMonth }) {
     isOutsideVisibleRange
   } = reactAria.useCalendarCell({ date: date$1 }, state2, ref);
   const isOutsideMonth = !date.isSameMonth(currentMonth, date$1);
-  const styles2 = react.useMultiStyleConfig("Datepicker", {});
+  const styles3 = react.useMultiStyleConfig("Datepicker", {});
   const stateProps = {};
   if (isSelected) {
     stateProps["data-selected"] = true;
@@ -2984,7 +2984,7 @@ function CalendarCell({ state: state2, date: date$1, currentMonth }) {
         ...buttonProps,
         ...stateProps,
         ref,
-        sx: styles2.dateCell,
+        sx: styles3.dateCell,
         hidden: isOutsideVisibleRange,
         width: "100%"
       },
@@ -3038,14 +3038,14 @@ function CalendarGrid({ state: state2, offset = {} }) {
   );
   const weeksInMonth = date.getWeeksInMonth(state2.visibleRange.start, locale);
   const weeksInMonthRange = new Array(weeksInMonth).fill(0).map((_, i) => i);
-  const styles2 = react.useMultiStyleConfig("Datepicker", {});
+  const styles3 = react.useMultiStyleConfig("Datepicker", {});
   return /* @__PURE__ */ React50__namespace.default.createElement("table", { ...gridProps }, /* @__PURE__ */ React50__namespace.default.createElement("thead", { ...headerProps }, /* @__PURE__ */ React50__namespace.default.createElement("tr", null, weekDays[language].map((day, index) => {
     return /* @__PURE__ */ React50__namespace.default.createElement(
       exports.Text,
       {
         as: "th",
         key: index,
-        sx: index < 5 ? styles2.weekdays : styles2.weekend,
+        sx: index < 5 ? styles3.weekdays : styles3.weekend,
         variant: "sm"
       },
       day
@@ -3255,7 +3255,7 @@ var init_CalendarTriggerButton = __esm({
     CalendarTriggerButton = react.forwardRef(
       ({ ...buttonProps }, ref) => {
         const { t: t2 } = useTranslation();
-        const styles2 = react.useMultiStyleConfig("Datepicker", {});
+        const styles3 = react.useMultiStyleConfig("Datepicker", {});
         const { onPress, ...filteredButtonProps } = buttonProps;
         const handleOnPress = (event) => {
           if (onPress) {
@@ -3270,7 +3270,7 @@ var init_CalendarTriggerButton = __esm({
             as: "button",
             type: "button",
             "aria-label": t2(texts9.openCalendar),
-            sx: styles2.calendarTriggerButton,
+            sx: styles3.calendarTriggerButton,
             ...filteredButtonProps,
             onKeyUp: handleOnPress
           },
@@ -3300,7 +3300,7 @@ var init_DateTimeSegment = __esm({
           state2,
           ref
         );
-        const styles2 = react.useMultiStyleConfig("Datepicker", {
+        const styles3 = react.useMultiStyleConfig("Datepicker", {
           isPlaceholder: segment.isPlaceholder,
           isEditable: segment.isEditable
         });
@@ -3311,15 +3311,15 @@ var init_DateTimeSegment = __esm({
             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"
@@ -3350,7 +3350,7 @@ var init_DateField = __esm({
       (props, externalRef) => {
         var _a6;
         const locale = useCurrentLocale();
-        const styles2 = react.useMultiStyleConfig("Datepicker", {});
+        const styles3 = react.useMultiStyleConfig("Datepicker", {});
         const state2 = $3c0fc76039f1c516$export$60e84778edff6d26({
           ...props,
           locale,
@@ -3368,7 +3368,7 @@ var init_DateField = __esm({
           {
             ...props.labelProps,
             ...labelProps,
-            sx: styles2.inputLabel,
+            sx: styles3.inputLabel,
             position: "absolute",
             paddingTop: "2px"
           },
@@ -3401,12 +3401,12 @@ var init_StyledField = __esm({
         const { isInvalid } = react.useFormControlContext() ?? {
           isInvalid: false
         };
-        const styles2 = react.useMultiStyleConfig("Datepicker", { variant });
+        const styles3 = react.useMultiStyleConfig("Datepicker", { variant });
         return /* @__PURE__ */ React50__namespace.default.createElement(
           react.Box,
           {
             ...otherProps,
-            __css: styles2.wrapper,
+            __css: styles3.wrapper,
             ref,
             "aria-invalid": isInvalid
           },
@@ -3459,7 +3459,7 @@ var init_DatePicker = __esm({
           state2,
           ref
         );
-        const styles2 = react.useMultiStyleConfig("Datepicker", {});
+        const styles3 = react.useMultiStyleConfig("Datepicker", {});
         const locale = useCurrentLocale();
         const responsiveVariant = react.useBreakpointValue(typeof variant === "string" ? [variant] : variant) ?? "simple";
         const hasTrigger = responsiveVariant === "with-trigger";
@@ -3468,7 +3468,7 @@ var init_DatePicker = __esm({
             state2.setOpen(true);
           }
         };
-        const popoverContent = /* @__PURE__ */ React50__namespace.default.createElement(react.PopoverContent, { color: "darkGrey", boxShadow: "md", sx: styles2.calendar }, /* @__PURE__ */ React50__namespace.default.createElement(react.PopoverArrow, { sx: styles2.arrow }), /* @__PURE__ */ React50__namespace.default.createElement(react.PopoverBody, null, /* @__PURE__ */ React50__namespace.default.createElement(react.FocusLock, null, /* @__PURE__ */ React50__namespace.default.createElement(
+        const popoverContent = /* @__PURE__ */ React50__namespace.default.createElement(react.PopoverContent, { color: "darkGrey", boxShadow: "md", sx: styles3.calendar }, /* @__PURE__ */ React50__namespace.default.createElement(react.PopoverArrow, { sx: styles3.arrow }), /* @__PURE__ */ React50__namespace.default.createElement(react.PopoverBody, null, /* @__PURE__ */ React50__namespace.default.createElement(react.FocusLock, null, /* @__PURE__ */ React50__namespace.default.createElement(
           Calendar,
           {
             ...calendarProps,
@@ -3566,7 +3566,7 @@ function DateRangePicker({
     calendarProps
   } = reactAria.useDateRangePicker(props, state2, ref);
   const responsiveVariant = react.useBreakpointValue(typeof variant === "string" ? [variant] : variant) ?? "simple";
-  const styles2 = react.useMultiStyleConfig("Datepicker", {
+  const styles3 = react.useMultiStyleConfig("Datepicker", {
     variant: responsiveVariant
   });
   const locale = useCurrentLocale();
@@ -3582,8 +3582,8 @@ function DateRangePicker({
     }
   };
   const hasTrigger = responsiveVariant === "with-trigger";
-  const popoverContent = /* @__PURE__ */ React50__namespace.default.createElement(react.PopoverContent, { sx: styles2.calendar, boxShadow: "md", maxWidth: "none" }, /* @__PURE__ */ React50__namespace.default.createElement(react.PopoverArrow, { sx: styles2.arrow }), /* @__PURE__ */ React50__namespace.default.createElement(react.PopoverBody, null, /* @__PURE__ */ React50__namespace.default.createElement(react.FocusLock, null, /* @__PURE__ */ React50__namespace.default.createElement(RangeCalendar, { ...calendarProps }))));
-  return /* @__PURE__ */ React50__namespace.default.createElement(reactAria.I18nProvider, { locale }, /* @__PURE__ */ React50__namespace.default.createElement(react.Box, { position: "relative", display: "inline-flex", flexDirection: "column" }, props.label && /* @__PURE__ */ React50__namespace.default.createElement(react.FormLabel, { ...labelProps, sx: styles2.inputLabel }, props.label), /* @__PURE__ */ React50__namespace.default.createElement(
+  const popoverContent = /* @__PURE__ */ React50__namespace.default.createElement(react.PopoverContent, { sx: styles3.calendar, boxShadow: "md", maxWidth: "none" }, /* @__PURE__ */ React50__namespace.default.createElement(react.PopoverArrow, { sx: styles3.arrow }), /* @__PURE__ */ React50__namespace.default.createElement(react.PopoverBody, null, /* @__PURE__ */ React50__namespace.default.createElement(react.FocusLock, null, /* @__PURE__ */ React50__namespace.default.createElement(RangeCalendar, { ...calendarProps }))));
+  return /* @__PURE__ */ React50__namespace.default.createElement(reactAria.I18nProvider, { locale }, /* @__PURE__ */ React50__namespace.default.createElement(react.Box, { position: "relative", display: "inline-flex", flexDirection: "column" }, props.label && /* @__PURE__ */ React50__namespace.default.createElement(react.FormLabel, { ...labelProps, sx: styles3.inputLabel }, props.label), /* @__PURE__ */ React50__namespace.default.createElement(
     react.Popover,
     {
       ...dialogProps,
@@ -3976,7 +3976,7 @@ var init_CardSelect = __esm({
           triggerRef
         );
         const { buttonProps } = reactAria.useButton(triggerProps, triggerRef);
-        const styles2 = react.useMultiStyleConfig("CardSelect", { variant, size: size2 });
+        const styles3 = react.useMultiStyleConfig("CardSelect", { variant, size: size2 });
         useForceRerender(state2.isOpen);
         const ChevronIcon = size2 === "sm" ? sporIconReact.DropdownDownFill18Icon : sporIconReact.DropdownDownFill24Icon;
         return /* @__PURE__ */ React50__namespace.default.createElement(react.Box, { ...props }, /* @__PURE__ */ React50__namespace.default.createElement(
@@ -3984,7 +3984,7 @@ var init_CardSelect = __esm({
           {
             type: "button",
             ref: triggerRef,
-            sx: styles2.trigger,
+            sx: styles3.trigger,
             ...buttonProps,
             width,
             "data-attachable": true
@@ -4009,7 +4009,7 @@ var init_CardSelect = __esm({
             {
               colorScheme: "white",
               size: "lg",
-              sx: styles2.card,
+              sx: styles3.card,
               ...overlayProps
             },
             /* @__PURE__ */ React50__namespace.default.createElement(Dialog, { "aria-label": label }, children)
@@ -4802,7 +4802,7 @@ var init_ChoiceChip = __esm({
         getRootProps,
         getLabelProps
       } = react.useCheckbox(props);
-      const styles2 = react.useMultiStyleConfig("ChoiceChip", {
+      const styles3 = react.useMultiStyleConfig("ChoiceChip", {
         size: size2,
         variant,
         icon,
@@ -4821,13 +4821,13 @@ var init_ChoiceChip = __esm({
           react.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__namespace.default.createElement(react.chakra.span, { __css: styles2.icon }, state2.isChecked ? icon.checked : icon.default),
-          /* @__PURE__ */ React50__namespace.default.createElement(react.chakra.span, { __css: styles2.label, ...getCheckboxProps() }, variant !== "icon" && children),
+          icon && /* @__PURE__ */ React50__namespace.default.createElement(react.chakra.span, { __css: styles3.icon }, state2.isChecked ? icon.checked : icon.default),
+          /* @__PURE__ */ React50__namespace.default.createElement(react.chakra.span, { __css: styles3.label, ...getCheckboxProps() }, variant !== "icon" && children),
           variant === "filter" && state2.isChecked && /* @__PURE__ */ React50__namespace.default.createElement(sporIconReact.CloseOutline24Icon, { marginLeft: 1.5 })
         )
       );
@@ -5063,13 +5063,13 @@ function ListBox({
   ...props
 }) {
   const { listBoxProps } = reactAria.useListBox(props, state2, listBoxRef);
-  const styles2 = react.useMultiStyleConfig("ListBox", {});
+  const styles3 = react.useMultiStyleConfig("ListBox", {});
   return /* @__PURE__ */ React50__namespace.default.createElement(
     react.List,
     {
       ...listBoxProps,
       ref: listBoxRef,
-      sx: styles2.container,
+      sx: styles3.container,
       "aria-busy": isLoading,
       maxWidth
     },
@@ -5081,13 +5081,13 @@ function ListBox({
 }
 function ItemLabel({ children }) {
   let { labelProps } = useOptionContext();
-  const styles2 = react.useMultiStyleConfig("ListBox", {});
-  return /* @__PURE__ */ React50__namespace.default.createElement(react.Box, { ...labelProps, sx: styles2.label }, children);
+  const styles3 = react.useMultiStyleConfig("ListBox", {});
+  return /* @__PURE__ */ React50__namespace.default.createElement(react.Box, { ...labelProps, sx: styles3.label }, children);
 }
 function ItemDescription({ children }) {
   let { descriptionProps } = useOptionContext();
-  const styles2 = react.useMultiStyleConfig("ListBox", {});
-  return /* @__PURE__ */ React50__namespace.default.createElement(react.Box, { ...descriptionProps, sx: styles2.description }, children);
+  const styles3 = react.useMultiStyleConfig("ListBox", {});
+  return /* @__PURE__ */ React50__namespace.default.createElement(react.Box, { ...descriptionProps, sx: styles3.description }, children);
 }
 function Option({ item, state: state2 }) {
   const ref = React50.useRef(null);
@@ -5099,7 +5099,7 @@ function Option({ item, state: state2 }) {
     labelProps,
     descriptionProps
   } = reactAria.useOption({ key: item.key }, state2, ref);
-  const styles2 = react.useMultiStyleConfig("ListBox", {});
+  const styles3 = react.useMultiStyleConfig("ListBox", {});
   let dataFields = {};
   if (isSelected) {
     dataFields["data-selected"] = true;
@@ -5120,7 +5120,7 @@ function Option({ item, state: state2 }) {
       { passive: false, once: true }
     );
   }, []);
-  return /* @__PURE__ */ React50__namespace.default.createElement(OptionContext.Provider, { value: { labelProps, descriptionProps } }, /* @__PURE__ */ React50__namespace.default.createElement(react.ListItem, { ...optionProps, ...dataFields, ref, sx: styles2.item }, item.rendered));
+  return /* @__PURE__ */ React50__namespace.default.createElement(OptionContext.Provider, { value: { labelProps, descriptionProps } }, /* @__PURE__ */ React50__namespace.default.createElement(react.ListItem, { ...optionProps, ...dataFields, ref, sx: styles3.item }, item.rendered));
 }
 function ListBoxSection({ section, state: state2 }) {
   const { itemProps, headingProps, groupProps } = reactAria.useListBoxSection({
@@ -5182,14 +5182,14 @@ function InfoSelect({
     state2,
     triggerRef
   );
-  const styles2 = react.useMultiStyleConfig("InfoSelect", {
+  const styles3 = react.useMultiStyleConfig("InfoSelect", {
     isOpen: state2.isOpen,
     isLabelSrOnly
   });
   const { buttonProps } = reactAria.useButton(triggerProps, triggerRef);
   const { t: t2 } = useTranslation();
   const formControl = react.useFormControlProps(props);
-  return /* @__PURE__ */ React50__namespace.default.createElement(react.Box, { sx: styles2.container }, /* @__PURE__ */ React50__namespace.default.createElement(react.chakra.div, { ...labelProps, sx: styles2.label }, props.label), /* @__PURE__ */ React50__namespace.default.createElement(
+  return /* @__PURE__ */ React50__namespace.default.createElement(react.Box, { sx: styles3.container }, /* @__PURE__ */ React50__namespace.default.createElement(react.chakra.div, { ...labelProps, sx: styles3.label }, props.label), /* @__PURE__ */ React50__namespace.default.createElement(
     reactAria.HiddenSelect,
     {
       state: state2,
@@ -5202,7 +5202,7 @@ function InfoSelect({
     {
       type: "button",
       ref: triggerRef,
-      sx: styles2.button,
+      sx: styles3.button,
       ...buttonProps,
       width,
       height,
@@ -5211,7 +5211,7 @@ function InfoSelect({
       "aria-describedby": formControl["aria-describedby"]
     },
     /* @__PURE__ */ React50__namespace.default.createElement(react.Box, { ...valueProps }, state2.selectedItem ? state2.selectedItem.textValue ?? state2.selectedItem.rendered : placeholder ?? t2(texts11.selectAnOption)),
-    /* @__PURE__ */ React50__namespace.default.createElement(react.Box, { sx: styles2.arrowIcon }, state2.isOpen ? /* @__PURE__ */ React50__namespace.default.createElement(sporIconReact.DropdownUpFill24Icon, null) : /* @__PURE__ */ React50__namespace.default.createElement(sporIconReact.DropdownDownFill24Icon, null))
+    /* @__PURE__ */ React50__namespace.default.createElement(react.Box, { sx: styles3.arrowIcon }, state2.isOpen ? /* @__PURE__ */ React50__namespace.default.createElement(sporIconReact.DropdownUpFill24Icon, null) : /* @__PURE__ */ React50__namespace.default.createElement(sporIconReact.DropdownDownFill24Icon, null))
   ), state2.isOpen && /* @__PURE__ */ React50__namespace.default.createElement(
     Popover3,
     {
@@ -5288,13 +5288,13 @@ var init_NativeSelect = __esm({
     init_input();
     exports.NativeSelect = react.forwardRef(
       ({ label, ...props }, ref) => {
-        const styles2 = react.useMultiStyleConfig("Select", props);
+        const styles3 = react.useMultiStyleConfig("Select", props);
         return /* @__PURE__ */ React50__namespace.default.createElement(exports.FormControl, null, /* @__PURE__ */ React50__namespace.default.createElement(
           react.Select,
           {
             "data-attachable": true,
             ...props,
-            rootProps: { __css: styles2.root },
+            rootProps: { __css: styles3.root },
             ref
           }
         ), label && /* @__PURE__ */ React50__namespace.default.createElement(exports.FormLabel, null, label));
@@ -5997,12 +5997,12 @@ var init_LineIcon = __esm({
       sx,
       ...rest
     }) => {
-      const styles2 = react.useMultiStyleConfig("LineIcon", { variant, size: size2 });
+      const styles3 = react.useMultiStyleConfig("LineIcon", { variant, size: size2 });
       const Icon = getCorrectIcon({ variant, size: size2 });
       if (!Icon) {
         return null;
       }
-      return /* @__PURE__ */ React50__namespace.default.createElement(react.Box, { sx: { ...styles2.iconContainer, ...sx }, ...rest }, /* @__PURE__ */ React50__namespace.default.createElement(Icon, { sx: styles2.icon }));
+      return /* @__PURE__ */ React50__namespace.default.createElement(react.Box, { sx: { ...styles3.iconContainer, ...sx }, ...rest }, /* @__PURE__ */ React50__namespace.default.createElement(Icon, { sx: styles3.icon }));
     };
   }
 });
@@ -6016,8 +6016,8 @@ var init_InfoTag = __esm({
       title,
       description
     }) => {
-      const styles2 = react.useMultiStyleConfig("InfoTag", { variant, size: size2 });
-      return /* @__PURE__ */ React50__namespace.default.createElement(react.Box, { sx: styles2.container }, /* @__PURE__ */ React50__namespace.default.createElement(exports.LineIcon, { variant, size: size2, sx: styles2.iconContainer }), /* @__PURE__ */ React50__namespace.default.createElement(react.Box, { sx: styles2.textContainer }, title && /* @__PURE__ */ React50__namespace.default.createElement(react.Box, { as: "span", sx: styles2.title }, title), title && description && " ", description && /* @__PURE__ */ React50__namespace.default.createElement(react.Box, { as: "span", sx: styles2.description }, description)));
+      const styles3 = react.useMultiStyleConfig("InfoTag", { variant, size: size2 });
+      return /* @__PURE__ */ React50__namespace.default.createElement(react.Box, { sx: styles3.container }, /* @__PURE__ */ React50__namespace.default.createElement(exports.LineIcon, { variant, size: size2, sx: styles3.iconContainer }), /* @__PURE__ */ React50__namespace.default.createElement(react.Box, { sx: styles3.textContainer }, title && /* @__PURE__ */ React50__namespace.default.createElement(react.Box, { as: "span", sx: styles3.title }, title), title && description && " ", description && /* @__PURE__ */ React50__namespace.default.createElement(react.Box, { as: "span", sx: styles3.description }, description)));
     };
   }
 });
@@ -6035,13 +6035,13 @@ var init_TravelTag = __esm({
         isDisabled,
         ...rest
       }, ref) => {
-        const styles2 = react.useMultiStyleConfig("TravelTag", {
+        const styles3 = react.useMultiStyleConfig("TravelTag", {
           variant,
           size: size2,
           deviationLevel
         });
         const DeviationLevelIcon = getDeviationLevelIcon({ deviationLevel, size: size2 });
-        return /* @__PURE__ */ React50__namespace.default.createElement(react.Box, { sx: styles2.container, "aria-disabled": isDisabled, ref, ...rest }, /* @__PURE__ */ React50__namespace.default.createElement(exports.LineIcon, { variant, size: size2, sx: styles2.iconContainer }), /* @__PURE__ */ React50__namespace.default.createElement(react.Box, { sx: styles2.textContainer }, title && /* @__PURE__ */ React50__namespace.default.createElement(react.Box, { as: "span", sx: styles2.title }, title), title && description && " ", description && /* @__PURE__ */ React50__namespace.default.createElement(react.Box, { as: "span", sx: styles2.description }, description)), DeviationLevelIcon && /* @__PURE__ */ React50__namespace.default.createElement(DeviationLevelIcon, { sx: styles2.deviationIcon }));
+        return /* @__PURE__ */ React50__namespace.default.createElement(react.Box, { sx: styles3.container, "aria-disabled": isDisabled, ref, ...rest }, /* @__PURE__ */ React50__namespace.default.createElement(exports.LineIcon, { variant, size: size2, sx: styles3.iconContainer }), /* @__PURE__ */ React50__namespace.default.createElement(react.Box, { sx: styles3.textContainer }, title && /* @__PURE__ */ React50__namespace.default.createElement(react.Box, { as: "span", sx: styles3.title }, title), title && description && " ", description && /* @__PURE__ */ React50__namespace.default.createElement(react.Box, { as: "span", sx: styles3.description }, description)), DeviationLevelIcon && /* @__PURE__ */ React50__namespace.default.createElement(DeviationLevelIcon, { sx: styles3.deviationIcon }));
       }
     );
     getDeviationLevelIcon = ({
@@ -6106,6 +6106,10 @@ var init_link = __esm({
     init_TextLink();
   }
 });
+var init_list = __esm({
+  "src/list/index.tsx"() {
+  }
+});
 exports.VyLogo = void 0;
 var init_VyLogo = __esm({
   "src/logo/VyLogo.tsx"() {
@@ -6311,7 +6315,7 @@ var init_JumpButton = __esm({
       ...props
     }) => {
       const { t: t2 } = useTranslation();
-      const styles2 = react.useMultiStyleConfig("MediaControllerButton", {
+      const styles3 = react.useMultiStyleConfig("MediaControllerButton", {
         variant: "jumpSkip",
         size: size2
       });
@@ -6319,12 +6323,12 @@ var init_JumpButton = __esm({
         react.Center,
         {
           as: "button",
-          sx: styles2.container,
+          sx: styles3.container,
           "aria-label": direction2 === "forward" ? t2(texts18.forward) : t2(texts18.backward),
           disabled: isDisabled,
           ...props
         },
-        direction2 === "forward" ? /* @__PURE__ */ React50__namespace.default.createElement(JumpForwardIcon, { sx: styles2.icon }) : /* @__PURE__ */ React50__namespace.default.createElement(JumpBackwardIcon, { sx: styles2.icon })
+        direction2 === "forward" ? /* @__PURE__ */ React50__namespace.default.createElement(JumpForwardIcon, { sx: styles3.icon }) : /* @__PURE__ */ React50__namespace.default.createElement(JumpBackwardIcon, { sx: styles3.icon })
       );
     };
     texts18 = createTexts({
@@ -6355,7 +6359,7 @@ var init_PlayPauseButton = __esm({
       ...props
     }) => {
       const { t: t2 } = useTranslation();
-      const styles2 = react.useMultiStyleConfig("MediaControllerButton", {
+      const styles3 = react.useMultiStyleConfig("MediaControllerButton", {
         variant: "play",
         size: size2
       });
@@ -6363,12 +6367,12 @@ var init_PlayPauseButton = __esm({
         react.Center,
         {
           as: "button",
-          sx: styles2.container,
+          sx: styles3.container,
           "aria-label": isPlaying ? t2(texts19.pause) : t2(texts19.play),
           disabled: isDisabled,
           ...props
         },
-        isPlaying ? /* @__PURE__ */ React50__namespace.default.createElement(PauseIcon, { sx: styles2.icon }) : /* @__PURE__ */ React50__namespace.default.createElement(PlayIcon, { sx: styles2.icon })
+        isPlaying ? /* @__PURE__ */ React50__namespace.default.createElement(PauseIcon, { sx: styles3.icon }) : /* @__PURE__ */ React50__namespace.default.createElement(PlayIcon, { sx: styles3.icon })
       );
     };
     texts19 = createTexts({
@@ -6399,7 +6403,7 @@ var init_SkipButton = __esm({
       ...props
     }) => {
       const { t: t2 } = useTranslation();
-      const styles2 = react.useMultiStyleConfig("MediaControllerButton", {
+      const styles3 = react.useMultiStyleConfig("MediaControllerButton", {
         variant: "jumpSkip",
         size: size2
       });
@@ -6407,12 +6411,12 @@ var init_SkipButton = __esm({
         react.Center,
         {
           as: "button",
-          sx: styles2.container,
+          sx: styles3.container,
           "aria-label": direction2 === "forward" ? t2(texts20.next) : t2(texts20.previous),
           disabled: isDisabled,
           ...props
         },
-        direction2 === "forward" ? /* @__PURE__ */ React50__namespace.default.createElement(SkipNextIcon, { sx: styles2.icon }) : /* @__PURE__ */ React50__namespace.default.createElement(SkipPreviousIcon, { sx: styles2.icon })
+        direction2 === "forward" ? /* @__PURE__ */ React50__namespace.default.createElement(SkipNextIcon, { sx: styles3.icon }) : /* @__PURE__ */ React50__namespace.default.createElement(SkipPreviousIcon, { sx: styles3.icon })
       );
     };
     texts20 = createTexts({
@@ -6445,11 +6449,11 @@ var init_ModalHeader = __esm({
   "src/modal/ModalHeader.tsx"() {
     exports.ModalHeader = react.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__namespace.default.createElement(react.ModalHeader, { ...props, ref, ...styles2 });
+        return /* @__PURE__ */ React50__namespace.default.createElement(react.ModalHeader, { ...props, ref, ...styles3 });
       }
     );
   }
@@ -6692,15 +6696,7 @@ var init_SporProvider = __esm({
       children,
       ...props
     }) => {
-      return /* @__PURE__ */ React50__namespace.default.createElement(LanguageProvider, { language }, /* @__PURE__ */ React50__namespace.default.createElement(react.ChakraProvider, { theme: theme3, ...props }, /* @__PURE__ */ React50__namespace.default.createElement(react$1.Global, { styles: exports.fontFaces }), /* @__PURE__ */ React50__namespace.default.createElement(
-        react$1.Global,
-        {
-          styles: `
-          html, body { color: ${theme3.colors.darkGrey}; }
-          svg { display: initial; }
-          `
-        }
-      ), children));
+      return /* @__PURE__ */ React50__namespace.default.createElement(LanguageProvider, { language }, /* @__PURE__ */ React50__namespace.default.createElement(react.ChakraProvider, { theme: theme3, ...props }, /* @__PURE__ */ React50__namespace.default.createElement(react$1.Global, { styles: exports.fontFaces }), children));
     };
   }
 });
@@ -7627,8 +7623,8 @@ function defineCssVars(scope, keys2) {
   }
   return vars2;
 }
-function defineStyle(styles2) {
-  return styles2;
+function defineStyle(styles3) {
+  return styles3;
 }
 function defineStyleConfig(config37) {
   return config37;
@@ -8215,11 +8211,11 @@ var init_dist3 = __esm({
       overflow: "visible",
       whiteSpace: "normal"
     };
-    getWithPriority = (theme3, key, styles2) => {
+    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];
       }
@@ -8237,15 +8233,15 @@ var init_dist3 = __esm({
       },
       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)
       }
     };
     position = {
@@ -12262,9 +12258,9 @@ var fonts;
 var init_fonts = __esm({
   "src/theme/foundations/fonts.ts"() {
     fonts = {
-      body: tokens10__namespace.default.font.family.body,
-      heading: tokens10__namespace.default.font.family.heading,
-      mono: tokens10__namespace.default.font.family.monospace
+      body: `${tokens10__namespace.default.font.family.body}, sans-serif`,
+      heading: `${tokens10__namespace.default.font.family.heading}, sans-serif`,
+      mono: `${tokens10__namespace.default.font.family.monospace}, monospace`
     };
   }
 });
@@ -12483,6 +12479,21 @@ var init_zIndices = __esm({
     };
   }
 });
+var styles2;
+var init_styles = __esm({
+  "src/theme/foundations/styles.ts"() {
+    styles2 = {
+      global: (props) => ({
+        "html, body": {
+          color: themeTools.mode("darkGrey", "lightGrey")(props)
+        },
+        svg: {
+          display: "initial"
+        }
+      })
+    };
+  }
+});
 
 // src/theme/foundations/index.ts
 var foundations_exports = {};
@@ -12500,6 +12511,7 @@ __export(foundations_exports, {
   sizes: () => sizes24,
   space: () => space2,
   spacing: () => spacing2,
+  styles: () => styles2,
   textStyles: () => textStyles,
   zIndices: () => zIndices2
 });
@@ -12519,6 +12531,7 @@ var init_foundations = __esm({
     init_spacing();
     init_textStyles();
     init_zIndices();
+    init_styles();
   }
 });
 
@@ -12737,12 +12750,12 @@ var init_alert2 = __esm({
   }
 });
 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 config5, badge_default, colorCombinations;
 var init_badge = __esm({
@@ -16575,8 +16588,8 @@ var init_BaseToast = __esm({
   "src/toast/BaseToast.tsx"() {
     init_src();
     BaseToast = ({ children, variant, id }) => {
-      const styles2 = react.useStyleConfig("Toast", { variant });
-      return /* @__PURE__ */ React50__namespace.default.createElement(react.Flex, { sx: styles2, id }, /* @__PURE__ */ React50__namespace.default.createElement(ToastIcon, { variant }), children);
+      const styles3 = react.useStyleConfig("Toast", { variant });
+      return /* @__PURE__ */ React50__namespace.default.createElement(react.Flex, { sx: styles3, id }, /* @__PURE__ */ React50__namespace.default.createElement(ToastIcon, { variant }), children);
     };
     ToastIcon = ({ variant }) => {
       const Icon = getIcon3(variant);
@@ -16651,12 +16664,12 @@ var init_ClosableToast = __esm({
       variant,
       id
     }) => {
-      const styles2 = react.useMultiStyleConfig("Toast", { variant });
+      const styles3 = react.useMultiStyleConfig("Toast", { variant });
       const { t: t2 } = useTranslation();
       return /* @__PURE__ */ React50__namespace.default.createElement(BaseToast, { variant, id }, /* @__PURE__ */ React50__namespace.default.createElement(react.Box, { flexGrow: "1" }, children), /* @__PURE__ */ React50__namespace.default.createElement(
         exports.IconButton,
         {
-          sx: styles2.dismissButton,
+          sx: styles3.dismissButton,
           variant: "ghost",
           "aria-label": t2(texts24.dismiss),
           icon: /* @__PURE__ */ React50__namespace.default.createElement(sporIconReact.CloseFill18Icon, null),
@@ -16760,6 +16773,7 @@ var init_src = __esm({
     init_layout();
     init_linjetag();
     init_link();
+    init_list();
     init_loader();
     init_logo();
     init_media_controller();
@@ -16870,6 +16884,10 @@ Object.defineProperty(exports, 'LightMode', {
   enumerable: true,
   get: function () { return react.LightMode; }
 });
+Object.defineProperty(exports, 'ListItem', {
+  enumerable: true,
+  get: function () { return react.ListItem; }
+});
 Object.defineProperty(exports, 'Modal', {
   enumerable: true,
   get: function () { return react.Modal; }
@@ -16894,6 +16912,10 @@ Object.defineProperty(exports, 'ModalOverlay', {
   enumerable: true,
   get: function () { return react.ModalOverlay; }
 });
+Object.defineProperty(exports, 'OrderedList', {
+  enumerable: true,
+  get: function () { return react.OrderedList; }
+});
 Object.defineProperty(exports, 'Popover', {
   enumerable: true,
   get: function () { return react.Popover; }
@@ -16994,6 +17016,10 @@ Object.defineProperty(exports, 'Tr', {
   enumerable: true,
   get: function () { return react.Tr; }
 });
+Object.defineProperty(exports, 'UnorderedList', {
+  enumerable: true,
+  get: function () { return react.UnorderedList; }
+});
 Object.defineProperty(exports, 'VStack', {
   enumerable: true,
   get: function () { return react.VStack; }