@vygruppen/spor-react 2.2.0 → 2.3.0

package/dist/{chunk-2KP5MQG7.mjs → chunk-NYC3Z75S.mjs}

@@ -1,4 +1,4 @@
-import { forwardRef, Accordion as Accordion$1, Skeleton as Skeleton$1, useButtonGroup, Button as Button$1, Box, Center, ButtonGroup as ButtonGroup$1, IconButton as IconButton$1, Stack as Stack$1, useStyleConfig, Badge as Badge$1, Code as Code$1, Text, useFormControlContext, useMultiStyleConfig, chakra, Flex, Checkbox as Checkbox$1, useCheckbox, FormControl as FormControl$1, FormLabel, InputGroup, 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, useBreakpointValue, Popover, PopoverAnchor, Portal, PopoverContent, PopoverArrow, PopoverBody, Heading as Heading$1, CheckboxGroup as CheckboxGroup$1, useFormControlProps, Drawer as Drawer$1, DrawerOverlay, DrawerCloseButton, DrawerBody, usePopoverContext, DarkMode, PopoverTrigger, PopoverCloseButton, ChakraProvider, HStack, useToast as useToast$1, useInterval } from '@chakra-ui/react';
+import { forwardRef, Accordion as Accordion$1, Skeleton as Skeleton$1, useButtonGroup, Button as Button$1, Box, Center, ButtonGroup as ButtonGroup$1, IconButton as IconButton$1, Stack as Stack$1, useStyleConfig, Badge as Badge$1, Code as Code$1, Text, useFormControlContext, useMultiStyleConfig, chakra, Flex, Checkbox as Checkbox$1, useCheckbox, FormControl as FormControl$1, FormLabel, InputGroup, 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, useBreakpointValue, Popover, PopoverAnchor, Portal, PopoverContent, PopoverArrow, PopoverBody, Heading as Heading$1, CheckboxGroup as CheckboxGroup$1, useFormControl, useColorModeValue, useFormControlProps, Drawer as Drawer$1, DrawerOverlay, DrawerCloseButton, DrawerBody, usePopoverContext, DarkMode, PopoverTrigger, 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';
 import tokens10__default from '@vygruppen/spor-design-tokens';
 import * as tokens10 from '@vygruppen/spor-design-tokens';
@@ -871,8 +871,8 @@ var Language = /* @__PURE__ */ ((Language3) => {
 var { LanguageProvider, useTranslation } = initLobot(
   "nb" /* NorwegianBokmal */
 );
-function createTexts(texts22) {
-  return texts22;
+function createTexts(texts23) {
+  return texts23;
 }
 var hydrating = true;
 function useHydrated() {
@@ -3299,8 +3299,6 @@ var getCurrentTime = () => {
 var getTimestampFromTime = (time) => {
   return `${(time == null ? void 0 : time.hour) ?? 0}:${(time == null ? void 0 : time.minute) ?? 0}`;
 };
-
-// src/datepicker/CalendarGrid.tsx
 var weekDays = {
   nb: ["Ma", "Ti", "On", "To", "Fr", "L\xF8", "S\xF8"],
   nn: ["Ma", "Ti", "On", "To", "Fr", "L\xF8", "S\xF8"],
@@ -3321,16 +3319,19 @@ function CalendarGrid({ state: state2, offset = {} }) {
   );
   const weeksInMonth = getWeeksInMonth(state2.visibleRange.start, locale);
   const weeksInMonthRange = new Array(weeksInMonth).fill(0).map((_, i) => i);
-  return /* @__PURE__ */ React48__default.createElement("table", { ...gridProps }, /* @__PURE__ */ React48__default.createElement("thead", { ...headerProps }, /* @__PURE__ */ React48__default.createElement("tr", null, weekDays[language].map((day, index) => /* @__PURE__ */ React48__default.createElement(
-    Text4,
-    {
-      as: "th",
-      key: index,
-      color: index < 5 ? "darkGrey" : "greenHaze",
-      variant: "sm"
-    },
-    day
-  )))), /* @__PURE__ */ React48__default.createElement("tbody", null, weeksInMonthRange.map((weekIndex) => /* @__PURE__ */ React48__default.createElement("tr", { key: weekIndex }, state2.getDatesInWeek(weekIndex, startDate).map(
+  const styles2 = useMultiStyleConfig("Datepicker", {});
+  return /* @__PURE__ */ React48__default.createElement("table", { ...gridProps }, /* @__PURE__ */ React48__default.createElement("thead", { ...headerProps }, /* @__PURE__ */ React48__default.createElement("tr", null, weekDays[language].map((day, index) => {
+    return /* @__PURE__ */ React48__default.createElement(
+      Text4,
+      {
+        as: "th",
+        key: index,
+        sx: index < 5 ? styles2.weekdays : styles2.weekend,
+        variant: "sm"
+      },
+      day
+    );
+  }))), /* @__PURE__ */ React48__default.createElement("tbody", null, weeksInMonthRange.map((weekIndex) => /* @__PURE__ */ React48__default.createElement("tr", { key: weekIndex }, state2.getDatesInWeek(weekIndex, startDate).map(
     (date, dayIndex) => date ? /* @__PURE__ */ React48__default.createElement(
       CalendarCell,
       {
@@ -3511,6 +3512,10 @@ var texts8 = createTexts({
 var DateTimeSegment = ({ segment, state: state2 }) => {
   const ref = useRef(null);
   const { segmentProps } = useDateSegment(segment, state2, ref);
+  const styles2 = useMultiStyleConfig("Datepicker", {
+    isPlaceholder: segment.isPlaceholder,
+    isEditable: segment.isEditable
+  });
   return /* @__PURE__ */ React48__default.createElement(
     Box,
     {
@@ -3526,7 +3531,7 @@ var DateTimeSegment = ({ segment, state: state2 }) => {
       outline: "none",
       borderRadius: "xs",
       fontSize: "mobile.md",
-      color: segment.isPlaceholder ? "dimGrey" : segment.isEditable ? "darkGrey" : "osloGrey",
+      sx: styles2.dateTimeSegment,
       _focus: {
         backgroundColor: "darkTeal",
         color: "white"
@@ -3618,6 +3623,7 @@ function DatePicker({
     }
   };
   const hasTrigger = responsiveVariant === "with-trigger";
+  const styles2 = useMultiStyleConfig("Datepicker", {});
   return /* @__PURE__ */ React48__default.createElement(I18nProvider, { locale }, /* @__PURE__ */ React48__default.createElement(Box, { position: "relative", display: "inline-flex", flexDirection: "column" }, /* @__PURE__ */ React48__default.createElement(
     Popover,
     {
@@ -3663,11 +3669,11 @@ function DatePicker({
     state2.isOpen && !props.isDisabled && /* @__PURE__ */ React48__default.createElement(Portal, null, /* @__PURE__ */ React48__default.createElement(
       PopoverContent,
       {
-        backgroundColor: "white",
         color: "darkGrey",
-        boxShadow: "md"
+        boxShadow: "md",
+        sx: styles2.calendar
       },
-      /* @__PURE__ */ React48__default.createElement(PopoverArrow, { backgroundColor: "white" }),
+      /* @__PURE__ */ React48__default.createElement(PopoverArrow, { sx: styles2.arrow }),
       /* @__PURE__ */ React48__default.createElement(PopoverBody, null, /* @__PURE__ */ React48__default.createElement(
         Calendar,
         {
@@ -3787,12 +3793,11 @@ function DateRangePicker({
     state2.isOpen && /* @__PURE__ */ React48__default.createElement(Portal, null, /* @__PURE__ */ React48__default.createElement(
       PopoverContent,
       {
-        backgroundColor: "white",
-        color: "darkGrey",
+        sx: styles2.calendar,
         boxShadow: "md",
         maxWidth: "none"
       },
-      /* @__PURE__ */ React48__default.createElement(PopoverArrow, { backgroundColor: "white" }),
+      /* @__PURE__ */ React48__default.createElement(PopoverArrow, { sx: styles2.arrow }),
       /* @__PURE__ */ React48__default.createElement(PopoverBody, null, /* @__PURE__ */ React48__default.createElement(RangeCalendar, { ...calendarProps }))
     ))
   )));
@@ -4166,6 +4171,229 @@ var ChoiceChip = forwardRef((props, ref) => {
     )
   );
 });
+var colors = {
+  ...tokens10__default.color.alias,
+  ...tokens10__default.color.palette,
+  linjetag: tokens10__default.color.linjetag
+};
+var shadows = {
+  none: "none",
+  sm: tokens10__default.depth.shadow.sm.value,
+  md: tokens10__default.depth.shadow.md.value,
+  lg: tokens10__default.depth.shadow.lg.value
+};
+
+// src/theme/utils/box-shadow-utils.ts
+var getBoxShadowString = (args) => {
+  var _a6;
+  if (Array.isArray(args)) {
+    return args.map((arg) => getBoxShadowString(arg)).join(", ");
+  }
+  const { baseShadow, borderColor, borderWidth = 1, isInset = true } = args;
+  const allShadows = [];
+  if (borderColor) {
+    let color2 = borderColor;
+    if (borderColor in colors) {
+      color2 = colors[borderColor];
+    } else {
+      const [subgroup, value] = borderColor.split(".");
+      const subgroupValue = (_a6 = colors[subgroup]) == null ? void 0 : _a6[value];
+      if (subgroupValue) {
+        color2 = subgroupValue;
+      }
+    }
+    allShadows.push(
+      `${isInset ? "inset " : ""}0 0 0 ${borderWidth}px ${color2}`
+    );
+  }
+  if (baseShadow) {
+    allShadows.push(shadows[baseShadow]);
+  }
+  return allShadows.join(", ");
+};
+
+// src/theme/utils/focus-utils.ts
+var focusVisible = ({ notFocus, focus }) => ({
+  _focus: focus,
+  _focusVisible: focus,
+  "&[data-focus]:not([data-focus-visible])": notFocus
+});
+
+// src/input/Counter.tsx
+function Counter({
+  name: nameProp,
+  id: idProp,
+  value: valueProp,
+  defaultValue = 1,
+  onChange: onChangeProp,
+  minValue = 0,
+  maxValue = 99,
+  isDisabled,
+  ...boxProps
+}) {
+  const { t: t2 } = useTranslation();
+  const [value, onChange] = useControllableState({
+    value: valueProp,
+    onChange: onChangeProp,
+    defaultValue
+  });
+  const formControlProps = useFormControl({ id: idProp, isDisabled });
+  const textColor = useColorModeValue("darkGrey", "white");
+  const backgroundColor = useColorModeValue("white", "darkGrey");
+  const focusColor = useColorModeValue("greenHaze", "azure");
+  return /* @__PURE__ */ React48__default.createElement(Flex, { alignItems: "center", ...boxProps }, /* @__PURE__ */ React48__default.createElement(
+    VerySmallButton,
+    {
+      icon: /* @__PURE__ */ React48__default.createElement(SubtractIcon, { color: "white" }),
+      "aria-label": t2(texts10.decrementButtonAriaLabel),
+      onClick: () => onChange(value - 1),
+      visibility: value <= minValue ? "hidden" : "visible",
+      isDisabled: formControlProps.disabled
+    }
+  ), /* @__PURE__ */ React48__default.createElement(
+    chakra.input,
+    {
+      type: "number",
+      min: minValue,
+      max: maxValue,
+      name: nameProp,
+      value,
+      ...formControlProps,
+      fontSize: "sm",
+      fontWeight: "bold",
+      width: "3ch",
+      marginX: 1,
+      paddingX: 1,
+      borderRadius: "xs",
+      textAlign: "center",
+      backgroundColor,
+      color: textColor,
+      transition: "all .1s ease-out",
+      _hover: {
+        boxShadow: getBoxShadowString({
+          borderColor: "currentColor",
+          borderWidth: 1
+        }),
+        _disabled: {
+          boxShadow: "none"
+        }
+      },
+      _disabled: {
+        opacity: 0.5
+      },
+      _focus: {
+        outline: "none",
+        boxShadow: getBoxShadowString({
+          borderColor: focusColor,
+          borderWidth: 1
+        })
+      },
+      onChange: (e) => {
+        const numericInput = Number(e.target.value);
+        if (Number.isNaN(numericInput)) {
+          return;
+        }
+        onChange(numericInput);
+      }
+    }
+  ), /* @__PURE__ */ React48__default.createElement(
+    VerySmallButton,
+    {
+      icon: /* @__PURE__ */ React48__default.createElement(AddIcon, { color: "white" }),
+      "aria-label": t2(texts10.incrementButtonAriaLabel),
+      onClick: () => onChange(value + 1),
+      visibility: value >= maxValue ? "hidden" : "visible",
+      isDisabled: formControlProps.disabled
+    }
+  ));
+}
+var VerySmallButton = (props) => {
+  return /* @__PURE__ */ React48__default.createElement(
+    IconButton,
+    {
+      variant: "primary",
+      size: "xs",
+      minWidth: "24px",
+      minHeight: "24px",
+      sx: focusVisible({
+        notFocus: { boxShadow: "none" },
+        focus: {
+          boxShadow: "inset 0 0 0 2px var(--spor-colors-pine), inset 0 0 0 3px white"
+        }
+      }),
+      ...props
+    }
+  );
+};
+var SubtractIcon = (props) => /* @__PURE__ */ React48__default.createElement(
+  Box,
+  {
+    as: "svg",
+    viewBox: "0 0 30 30",
+    width: "24",
+    height: "24",
+    stroke: "currentColor",
+    ...props
+  },
+  /* @__PURE__ */ React48__default.createElement(
+    "line",
+    {
+      x1: "9",
+      y1: "15",
+      x2: "21",
+      y2: "15",
+      strokeWidth: "1.5",
+      strokeLinecap: "round"
+    }
+  )
+);
+var AddIcon = (props) => /* @__PURE__ */ React48__default.createElement(
+  Box,
+  {
+    as: "svg",
+    viewBox: "0 0 30 30",
+    width: "24",
+    height: "24",
+    stroke: "currentColor",
+    ...props
+  },
+  /* @__PURE__ */ React48__default.createElement(
+    "line",
+    {
+      x1: "9",
+      y1: "15",
+      x2: "21",
+      y2: "15",
+      strokeWidth: "1.5",
+      strokeLinecap: "round"
+    }
+  ),
+  /* @__PURE__ */ React48__default.createElement(
+    "line",
+    {
+      x1: "15",
+      y1: "9",
+      x2: "15",
+      y2: "21",
+      strokeWidth: "1.5",
+      strokeLinecap: "round"
+    }
+  )
+);
+var texts10 = createTexts({
+  decrementButtonAriaLabel: {
+    nb: "Trekk fra 1",
+    en: "Subtract 1",
+    nn: "Trekk fr\xE5 1",
+    sv: "Subtrahera 1"
+  },
+  incrementButtonAriaLabel: {
+    nb: "Legg til 1",
+    en: "Add 1",
+    nn: "Legg til 1",
+    sv: "L\xE4gg till 1"
+  }
+});
 var FormControl = forwardRef((props, ref) => {
   return /* @__PURE__ */ React48__default.createElement(FormControl$1, { ...props, ref });
 });
@@ -4330,7 +4558,7 @@ function InfoSelect({
       "aria-invalid": formControl.isInvalid,
       "aria-describedby": formControl["aria-describedby"]
     },
-    /* @__PURE__ */ React48__default.createElement(Box, { ...valueProps }, state2.selectedItem ? state2.selectedItem.textValue ?? state2.selectedItem.rendered : placeholder ?? t2(texts10.selectAnOption)),
+    /* @__PURE__ */ React48__default.createElement(Box, { ...valueProps }, state2.selectedItem ? state2.selectedItem.textValue ?? state2.selectedItem.rendered : placeholder ?? t2(texts11.selectAnOption)),
     /* @__PURE__ */ React48__default.createElement(Box, { sx: styles2.arrowIcon }, state2.isOpen ? /* @__PURE__ */ React48__default.createElement(DropdownUpFill24Icon, null) : /* @__PURE__ */ React48__default.createElement(DropdownDownFill24Icon, null))
   ), state2.isOpen && /* @__PURE__ */ React48__default.createElement(Popover3, { state: state2, triggerRef }, /* @__PURE__ */ React48__default.createElement(
     ListBox,
@@ -4341,7 +4569,7 @@ function InfoSelect({
     }
   )));
 }
-var texts10 = createTexts({
+var texts11 = createTexts({
   selectAnOption: {
     nb: "Velg et alternativ",
     nn: "Velg eit alternativ",
@@ -4416,11 +4644,11 @@ var PasswordInput = forwardRef(
         borderRadius: "sm",
         mr: 1
       },
-      isShowingPassword ? t2(texts11.hidePassword) : t2(texts11.showPassword)
+      isShowingPassword ? t2(texts12.hidePassword) : t2(texts12.showPassword)
     )));
   }
 );
-var texts11 = createTexts({
+var texts12 = createTexts({
   showPassword: {
     nb: "Vis",
     nn: "Vis",
@@ -4477,20 +4705,24 @@ var PhoneNumberInput = forwardRef(
       Input,
       {
         ref,
-        label: t2(texts12.phoneNumber),
+        type: "tel",
+        label: t2(texts13.phoneNumber),
         value: value.nationalNumber,
         name: name ? `${name}-phone-number` : "phone-number",
-        onChange: (e) => onChange({
-          countryCode: value.countryCode,
-          nationalNumber: e.target.value
-        }),
+        onChange: (e) => {
+          const strippedValue = e.target.value.replace(/[^\d\s-]/g, "");
+          onChange({
+            countryCode: value.countryCode,
+            nationalNumber: strippedValue
+          });
+        },
         position: "relative",
         left: "-1px"
       }
     ));
   }
 );
-var texts12 = createTexts({
+var texts13 = createTexts({
   phoneNumber: {
     nb: "Telefonnummer",
     nn: "Telefonnummer",
@@ -4498,7 +4730,7 @@ var texts12 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React48__default.lazy(() => import('./CountryCodeSelect-MBBIVGTV.mjs'));
+var LazyCountryCodeSelect = React48__default.lazy(() => import('./CountryCodeSelect-B2GP2C3U.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React48__default.createElement(Radio$1, { ...props, ref });
 });
@@ -4531,21 +4763,21 @@ var SearchInput = forwardRef(
         placeholder: " ",
         "data-attachable": true
       }
-    ), /* @__PURE__ */ React48__default.createElement(FormLabel3, { htmlFor: inputId, pointerEvents: "none" }, label ?? t2(texts13.label)), showClearButton && /* @__PURE__ */ React48__default.createElement(InputRightElement2, { width: "fit-content" }, /* @__PURE__ */ React48__default.createElement(
+    ), /* @__PURE__ */ React48__default.createElement(FormLabel3, { htmlFor: inputId, pointerEvents: "none" }, label ?? t2(texts14.label)), showClearButton && /* @__PURE__ */ React48__default.createElement(InputRightElement2, { width: "fit-content" }, /* @__PURE__ */ React48__default.createElement(
       IconButton$1,
       {
         variant: "ghost",
         type: "button",
         size: "sm",
         mr: 1,
-        "aria-label": t2(texts13.reset),
+        "aria-label": t2(texts14.reset),
         icon: /* @__PURE__ */ React48__default.createElement(CloseOutline24Icon, null),
         onClick: onReset
       }
     )));
   }
 );
-var texts13 = createTexts({
+var texts14 = createTexts({
   label: {
     nb: "S\xF8k",
     nn: "S\xF8k",
@@ -4748,12 +4980,12 @@ var TextLink = forwardRef(
       LinkOutOutline24Icon,
       {
         marginLeft: 0.5,
-        "aria-label": t2(texts14.externalLink)
+        "aria-label": t2(texts15.externalLink)
       }
     ));
   }
 );
-var texts14 = createTexts({
+var texts15 = createTexts({
   externalLink: {
     nb: "Ekstern lenke",
     nn: "Ekstern lenke",
@@ -4955,14 +5187,14 @@ var JumpButton = ({
     {
       as: "button",
       sx: styles2.container,
-      "aria-label": direction2 === "forward" ? t2(texts15.forward) : t2(texts15.backward),
+      "aria-label": direction2 === "forward" ? t2(texts16.forward) : t2(texts16.backward),
       disabled: isDisabled,
       ...props
     },
     direction2 === "forward" ? /* @__PURE__ */ React48__default.createElement(JumpForwardIcon, { sx: styles2.icon }) : /* @__PURE__ */ React48__default.createElement(JumpBackwardIcon, { sx: styles2.icon })
   );
 };
-var texts15 = createTexts({
+var texts16 = createTexts({
   forward: {
     nb: "15 sekunder frem",
     nn: "15 sekunder fram",
@@ -4992,14 +5224,14 @@ var PlayPauseButton = ({
     {
       as: "button",
       sx: styles2.container,
-      "aria-label": isPlaying ? t2(texts16.pause) : t2(texts16.play),
+      "aria-label": isPlaying ? t2(texts17.pause) : t2(texts17.play),
       disabled: isDisabled,
       ...props
     },
     isPlaying ? /* @__PURE__ */ React48__default.createElement(PauseIcon, { sx: styles2.icon }) : /* @__PURE__ */ React48__default.createElement(PlayIcon, { sx: styles2.icon })
   );
 };
-var texts16 = createTexts({
+var texts17 = createTexts({
   pause: {
     nb: "Pause",
     nn: "Pause",
@@ -5029,14 +5261,14 @@ var SkipButton = ({
     {
       as: "button",
       sx: styles2.container,
-      "aria-label": direction2 === "forward" ? t2(texts17.next) : t2(texts17.previous),
+      "aria-label": direction2 === "forward" ? t2(texts18.next) : t2(texts18.previous),
       disabled: isDisabled,
       ...props
     },
     direction2 === "forward" ? /* @__PURE__ */ React48__default.createElement(SkipNextIcon, { sx: styles2.icon }) : /* @__PURE__ */ React48__default.createElement(SkipPreviousIcon, { sx: styles2.icon })
   );
 };
-var texts17 = createTexts({
+var texts18 = createTexts({
   next: {
     nb: "Neste",
     nn: "Neste",
@@ -5186,10 +5418,10 @@ var NextStepButton = ({ isLastStep, onNext }) => {
       leftIcon: isLastStep ? void 0 : /* @__PURE__ */ React48.createElement(ArrowRightFill18Icon, null),
       onClick: isLastStep ? onClose : onNext
     },
-    t2(isLastStep ? texts18.finish : texts18.nextStep)
+    t2(isLastStep ? texts19.finish : texts19.nextStep)
   );
 };
-var texts18 = createTexts({
+var texts19 = createTexts({
   nextStep: {
     nb: "Neste",
     nn: "Neste",
@@ -5304,7 +5536,7 @@ var Stepper = ({
     /* @__PURE__ */ React48__default.createElement(Box, { __css: style.container }, /* @__PURE__ */ React48__default.createElement(Box, { __css: style.innerContainer }, /* @__PURE__ */ React48__default.createElement(HStack, null, activeStep > 1 && /* @__PURE__ */ React48__default.createElement(
       IconButton,
       {
-        "aria-label": t2(texts19.back),
+        "aria-label": t2(texts20.back),
         icon: /* @__PURE__ */ React48__default.createElement(DropdownLeftFill24Icon, null),
         variant: "ghost",
         size: "sm",
@@ -5314,14 +5546,14 @@ var Stepper = ({
     ), /* @__PURE__ */ React48__default.createElement(
       SimplePopover,
       {
-        triggerElement: /* @__PURE__ */ React48__default.createElement(Box, { as: "button", __css: style.stepCounter }, t2(texts19.stepsOf(activeStep, numberOfSteps))),
+        triggerElement: /* @__PURE__ */ React48__default.createElement(Box, { as: "button", __css: style.stepCounter }, t2(texts20.stepsOf(activeStep, numberOfSteps))),
         borderRadius: "xs"
       },
       steps.map((step, index) => /* @__PURE__ */ React48__default.createElement(StepperStep, { key: step, stepNumber: index + 1 }, step))
     )), title && /* @__PURE__ */ React48__default.createElement(Box, { as: "h3", __css: style.title }, title)), /* @__PURE__ */ React48__default.createElement(Flex, { justifyContent: "center", display: ["none", "flex"] }, steps.map((step, index) => /* @__PURE__ */ React48__default.createElement(StepperStep, { key: index, stepNumber: index + 1 }, step))))
   ));
 };
-var texts19 = createTexts({
+var texts20 = createTexts({
   stepsOf: (activeStep, numberOfSteps) => ({
     nb: `Steg ${activeStep} av ${numberOfSteps}`,
     nn: `Steg ${activeStep} av ${numberOfSteps}`,
@@ -5396,6 +5628,35 @@ function isObject(value) {
   return value != null && (type === "object" || type === "function") && !Array.isArray(value);
 }
 
+// ../../node_modules/@chakra-ui/theme/dist/chunk-AU77DZXY.mjs
+var transitionProperty = {
+  common: "background-color, border-color, color, fill, stroke, opacity, box-shadow, transform",
+  colors: "background-color, border-color, color, fill, stroke",
+  dimensions: "width, height",
+  position: "left, right, top, bottom",
+  background: "background-color, background-image, background-position"
+};
+var transitionTimingFunction = {
+  "ease-in": "cubic-bezier(0.4, 0, 1, 1)",
+  "ease-out": "cubic-bezier(0, 0, 0.2, 1)",
+  "ease-in-out": "cubic-bezier(0.4, 0, 0.2, 1)"
+};
+var transitionDuration = {
+  "ultra-fast": "50ms",
+  faster: "100ms",
+  fast: "150ms",
+  normal: "200ms",
+  slow: "300ms",
+  slower: "400ms",
+  "ultra-slow": "500ms"
+};
+var transition = {
+  property: transitionProperty,
+  easing: transitionTimingFunction,
+  duration: transitionDuration
+};
+var transition_default = transition;
+
 // ../../node_modules/@chakra-ui/theme/dist/chunk-7OKLMD4V.mjs
 var zIndices = {
   hide: -1,
@@ -5414,6 +5675,16 @@ var zIndices = {
 };
 var z_index_default = zIndices;
 
+// ../../node_modules/@chakra-ui/theme/dist/chunk-ZV5E32CG.mjs
+var borders = {
+  none: 0,
+  "1px": "1px solid",
+  "2px": "2px solid",
+  "4px": "4px solid",
+  "8px": "8px solid"
+};
+var borders_default = borders;
+
 // ../../node_modules/@chakra-ui/theme/dist/chunk-DDAHWWWN.mjs
 var breakpoints = {
   base: "0em",
@@ -5426,7 +5697,7 @@ var breakpoints = {
 var breakpoints_default = breakpoints;
 
 // ../../node_modules/@chakra-ui/theme/dist/chunk-C7H5GWRZ.mjs
-var colors = {
+var colors2 = {
   transparent: "transparent",
   current: "currentColor",
   black: "#000000",
@@ -5648,7 +5919,7 @@ var colors = {
     900: "#003F5E"
   }
 };
-var colors_default = colors;
+var colors_default = colors2;
 
 // ../../node_modules/@chakra-ui/theme/dist/chunk-4REDROSM.mjs
 var radii = {
@@ -5665,7 +5936,7 @@ var radii = {
 var radius_default = radii;
 
 // ../../node_modules/@chakra-ui/theme/dist/chunk-DJNGX4VH.mjs
-var shadows = {
+var shadows2 = {
   xs: "0 0 0 1px rgba(0, 0, 0, 0.05)",
   sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
   base: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
@@ -5678,36 +5949,7 @@ var shadows = {
   none: "none",
   "dark-lg": "rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px 5px 10px, rgba(0, 0, 0, 0.4) 0px 15px 40px"
 };
-var shadows_default = shadows;
-
-// ../../node_modules/@chakra-ui/theme/dist/chunk-AU77DZXY.mjs
-var transitionProperty = {
-  common: "background-color, border-color, color, fill, stroke, opacity, box-shadow, transform",
-  colors: "background-color, border-color, color, fill, stroke",
-  dimensions: "width, height",
-  position: "left, right, top, bottom",
-  background: "background-color, background-image, background-position"
-};
-var transitionTimingFunction = {
-  "ease-in": "cubic-bezier(0.4, 0, 1, 1)",
-  "ease-out": "cubic-bezier(0, 0, 0.2, 1)",
-  "ease-in-out": "cubic-bezier(0.4, 0, 0.2, 1)"
-};
-var transitionDuration = {
-  "ultra-fast": "50ms",
-  faster: "100ms",
-  fast: "150ms",
-  normal: "200ms",
-  slow: "300ms",
-  slower: "400ms",
-  "ultra-slow": "500ms"
-};
-var transition = {
-  property: transitionProperty,
-  easing: transitionTimingFunction,
-  duration: transitionDuration
-};
-var transition_default = transition;
+var shadows_default = shadows2;
 
 // ../../node_modules/@chakra-ui/theme/dist/chunk-OLDNEXT6.mjs
 var blur = {
@@ -5722,16 +5964,6 @@ var blur = {
 };
 var blur_default = blur;
 
-// ../../node_modules/@chakra-ui/theme/dist/chunk-ZV5E32CG.mjs
-var borders = {
-  none: 0,
-  "1px": "1px solid",
-  "2px": "2px solid",
-  "4px": "4px solid",
-  "8px": "8px solid"
-};
-var borders_default = borders;
-
 // ../../node_modules/@chakra-ui/theme/dist/chunk-HOOF7HHD.mjs
 var typography = {
   letterSpacings: {
@@ -5866,7 +6098,7 @@ var sizes = {
 };
 var sizes_default = sizes;
 
-// ../../node_modules/@chakra-ui/theme/dist/chunk-6S44RLTW.mjs
+// ../../node_modules/@chakra-ui/theme/dist/chunk-VYR6F67Y.mjs
 var foundations = {
   breakpoints: breakpoints_default,
   zIndices: z_index_default,
@@ -5881,162 +6113,6 @@ var foundations = {
   transition: transition_default
 };
 
-// ../../node_modules/@chakra-ui/anatomy/dist/chunk-ZN6IUO2A.mjs
-function anatomy(name, map = {}) {
-  let called = false;
-  function assert() {
-    if (!called) {
-      called = true;
-      return;
-    }
-    throw new Error(
-      "[anatomy] .part(...) should only be called once. Did you mean to use .extend(...) ?"
-    );
-  }
-  function parts14(...values) {
-    assert();
-    for (const part of values) {
-      map[part] = toPart(part);
-    }
-    return anatomy(name, map);
-  }
-  function extend(...parts22) {
-    for (const part of parts22) {
-      if (part in map)
-        continue;
-      map[part] = toPart(part);
-    }
-    return anatomy(name, map);
-  }
-  function selectors() {
-    const value = Object.fromEntries(
-      Object.entries(map).map(([key, part]) => [key, part.selector])
-    );
-    return value;
-  }
-  function classnames() {
-    const value = Object.fromEntries(
-      Object.entries(map).map(([key, part]) => [key, part.className])
-    );
-    return value;
-  }
-  function toPart(part) {
-    const el = ["container", "root"].includes(part != null ? part : "") ? [name] : [name, part];
-    const attr = el.filter(Boolean).join("__");
-    const className = `chakra-${attr}`;
-    const partObj = {
-      className,
-      selector: `.${className}`,
-      toString: () => part
-    };
-    return partObj;
-  }
-  const __type = {};
-  return {
-    parts: parts14,
-    toPart,
-    extend,
-    selectors,
-    classnames,
-    get keys() {
-      return Object.keys(map);
-    },
-    __type
-  };
-}
-
-// ../../node_modules/@chakra-ui/anatomy/dist/chunk-HAKT6JCA.mjs
-var accordionAnatomy = anatomy("accordion").parts("root", "container", "button", "panel").extend("icon");
-var alertAnatomy = anatomy("alert").parts("title", "description", "container").extend("icon", "spinner");
-var avatarAnatomy = anatomy("avatar").parts("label", "badge", "container").extend("excessLabel", "group");
-var breadcrumbAnatomy = anatomy("breadcrumb").parts("link", "item", "container").extend("separator");
-anatomy("button").parts();
-var checkboxAnatomy = anatomy("checkbox").parts("control", "icon", "container").extend("label");
-anatomy("progress").parts("track", "filledTrack").extend("label");
-var drawerAnatomy = anatomy("drawer").parts("overlay", "dialogContainer", "dialog").extend("header", "closeButton", "body", "footer");
-var editableAnatomy = anatomy("editable").parts(
-  "preview",
-  "input",
-  "textarea"
-);
-var formAnatomy = anatomy("form").parts(
-  "container",
-  "requiredIndicator",
-  "helperText"
-);
-var formErrorAnatomy = anatomy("formError").parts("text", "icon");
-var inputAnatomy = anatomy("input").parts("addon", "field", "element");
-var listAnatomy = anatomy("list").parts("container", "item", "icon");
-var menuAnatomy = anatomy("menu").parts("button", "list", "item").extend("groupTitle", "command", "divider");
-var modalAnatomy = anatomy("modal").parts("overlay", "dialogContainer", "dialog").extend("header", "closeButton", "body", "footer");
-var numberInputAnatomy = anatomy("numberinput").parts(
-  "root",
-  "field",
-  "stepperGroup",
-  "stepper"
-);
-anatomy("pininput").parts("field");
-var popoverAnatomy = anatomy("popover").parts("content", "header", "body", "footer").extend("popper", "arrow", "closeButton");
-var progressAnatomy = anatomy("progress").parts(
-  "label",
-  "filledTrack",
-  "track"
-);
-var radioAnatomy = anatomy("radio").parts(
-  "container",
-  "control",
-  "label"
-);
-var selectAnatomy = anatomy("select").parts("field", "icon");
-var sliderAnatomy = anatomy("slider").parts(
-  "container",
-  "track",
-  "thumb",
-  "filledTrack",
-  "mark"
-);
-var statAnatomy = anatomy("stat").parts(
-  "container",
-  "label",
-  "helpText",
-  "number",
-  "icon"
-);
-var switchAnatomy = anatomy("switch").parts(
-  "container",
-  "track",
-  "thumb"
-);
-var tableAnatomy = anatomy("table").parts(
-  "table",
-  "thead",
-  "tbody",
-  "tr",
-  "th",
-  "td",
-  "tfoot",
-  "caption"
-);
-var tabsAnatomy = anatomy("tabs").parts(
-  "root",
-  "tab",
-  "tablist",
-  "tabpanel",
-  "tabpanels",
-  "indicator"
-);
-var tagAnatomy = anatomy("tag").parts(
-  "container",
-  "label",
-  "closeButton"
-);
-var cardAnatomy = anatomy("card").parts(
-  "container",
-  "header",
-  "body",
-  "footer"
-);
-
 // ../../node_modules/@chakra-ui/styled-system/dist/index.mjs
 __toESM(require_lodash(), 1);
 __toESM(require_lodash(), 1);
@@ -6613,6 +6689,7 @@ var layout = {
   overscrollBehaviorX: true,
   overscrollBehaviorY: true,
   display: true,
+  aspectRatio: true,
   hideFrom: {
     scale: "breakpoints",
     transform: (value, theme3) => {
@@ -7074,7 +7151,9 @@ var pseudoSelectors = {
   _mediaDark: "@media (prefers-color-scheme: dark)",
   _mediaReduceMotion: "@media (prefers-reduced-motion: reduce)",
   _dark: ".chakra-ui-dark &:not([data-theme]),[data-theme=dark] &:not([data-theme]),&[data-theme=dark]",
-  _light: ".chakra-ui-light &:not([data-theme]),[data-theme=light] &:not([data-theme]),&[data-theme=light]"
+  _light: ".chakra-ui-light &:not([data-theme]),[data-theme=light] &:not([data-theme]),&[data-theme=light]",
+  _horizontal: "&[data-orientation=horizontal]",
+  _vertical: "&[data-orientation=vertical]"
 };
 var pseudoPropNames = Object.keys(
   pseudoSelectors
@@ -7101,26 +7180,328 @@ var systemProps = (0, import_lodash3.default)(
   list,
   transition2
 );
-Object.assign({}, space, layout, flexbox, grid, position);
-[...Object.keys(systemProps), ...pseudoPropNames];
-({ ...systemProps, ...pseudoSelectors });
-function defineStyle(styles2) {
-  return styles2;
-}
-function defineStyleConfig(config37) {
-  return config37;
-}
-function createMultiStyleConfigHelpers(parts14) {
-  return {
-    definePartsStyle(config37) {
-      return config37;
-    },
-    defineMultiStyleConfig(config37) {
-      return { parts: parts14, ...config37 };
-    }
-  };
-}
-var { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(switchAnatomy.keys);
+Object.assign({}, space, layout, flexbox, grid, position);
+[...Object.keys(systemProps), ...pseudoPropNames];
+({ ...systemProps, ...pseudoSelectors });
+function defineStyle(styles2) {
+  return styles2;
+}
+function defineStyleConfig(config37) {
+  return config37;
+}
+function createMultiStyleConfigHelpers(parts14) {
+  return {
+    definePartsStyle(config37) {
+      return config37;
+    },
+    defineMultiStyleConfig(config37) {
+      return { parts: parts14, ...config37 };
+    }
+  };
+}
+
+// ../../node_modules/@chakra-ui/theme/dist/chunk-HAMNZXTQ.mjs
+var { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers([
+  "stepper",
+  "step",
+  "title",
+  "description",
+  "indicator",
+  "separator",
+  "icon",
+  "number"
+]);
+var $size = cssVar("stepper-indicator-size");
+var $iconSize = cssVar("stepper-icon-size");
+var $titleFontSize = cssVar("stepper-title-font-size");
+var $descFontSize = cssVar("stepper-description-font-size");
+var $accentColor = cssVar("stepper-accent-color");
+var baseStyle = definePartsStyle(({ colorScheme: c }) => ({
+  stepper: {
+    display: "flex",
+    justifyContent: "space-between",
+    gap: "4",
+    "&[data-orientation=vertical]": {
+      flexDirection: "column",
+      alignItems: "flex-start"
+    },
+    "&[data-orientation=horizontal]": {
+      flexDirection: "row",
+      alignItems: "center"
+    },
+    [$accentColor.variable]: `colors.${c}.500`,
+    _dark: {
+      [$accentColor.variable]: `colors.${c}.200`
+    }
+  },
+  title: {
+    fontSize: $titleFontSize.reference,
+    fontWeight: "medium"
+  },
+  description: {
+    fontSize: $descFontSize.reference,
+    color: "chakra-subtle-text"
+  },
+  number: {
+    fontSize: $titleFontSize.reference
+  },
+  step: {
+    flexShrink: 0,
+    position: "relative",
+    display: "flex",
+    gap: "2",
+    "&[data-orientation=horizontal]": {
+      alignItems: "center"
+    },
+    flex: "1",
+    "&:last-of-type:not([data-stretch])": {
+      flex: "initial"
+    }
+  },
+  icon: {
+    flexShrink: 0,
+    width: $iconSize.reference,
+    height: $iconSize.reference
+  },
+  indicator: {
+    flexShrink: 0,
+    borderRadius: "full",
+    width: $size.reference,
+    height: $size.reference,
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    "&[data-status=active]": {
+      borderWidth: "2px",
+      borderColor: $accentColor.reference
+    },
+    "&[data-status=complete]": {
+      bg: $accentColor.reference,
+      color: "chakra-inverse-text"
+    },
+    "&[data-status=incomplete]": {
+      borderWidth: "2px"
+    }
+  },
+  separator: {
+    bg: "chakra-border-color",
+    flex: "1",
+    "&[data-status=complete]": {
+      bg: $accentColor.reference
+    },
+    "&[data-orientation=horizontal]": {
+      width: "100%",
+      height: "2px",
+      marginStart: "2"
+    },
+    "&[data-orientation=vertical]": {
+      width: "2px",
+      position: "absolute",
+      height: "100%",
+      maxHeight: `calc(100% - ${$size.reference} - 8px)`,
+      top: `calc(${$size.reference} + 4px)`,
+      insetStart: `calc(${$size.reference} / 2 - 1px)`
+    }
+  }
+}));
+var stepperTheme = defineMultiStyleConfig({
+  baseStyle,
+  sizes: {
+    xs: definePartsStyle({
+      stepper: {
+        [$size.variable]: "sizes.4",
+        [$iconSize.variable]: "sizes.3",
+        [$titleFontSize.variable]: "fontSizes.xs",
+        [$descFontSize.variable]: "fontSizes.xs"
+      }
+    }),
+    sm: definePartsStyle({
+      stepper: {
+        [$size.variable]: "sizes.6",
+        [$iconSize.variable]: "sizes.4",
+        [$titleFontSize.variable]: "fontSizes.sm",
+        [$descFontSize.variable]: "fontSizes.xs"
+      }
+    }),
+    md: definePartsStyle({
+      stepper: {
+        [$size.variable]: "sizes.8",
+        [$iconSize.variable]: "sizes.5",
+        [$titleFontSize.variable]: "fontSizes.md",
+        [$descFontSize.variable]: "fontSizes.sm"
+      }
+    }),
+    lg: definePartsStyle({
+      stepper: {
+        [$size.variable]: "sizes.10",
+        [$iconSize.variable]: "sizes.6",
+        [$titleFontSize.variable]: "fontSizes.lg",
+        [$descFontSize.variable]: "fontSizes.md"
+      }
+    })
+  },
+  defaultProps: {
+    size: "md",
+    colorScheme: "blue"
+  }
+});
+
+// ../../node_modules/@chakra-ui/anatomy/dist/chunk-ZN6IUO2A.mjs
+function anatomy(name, map = {}) {
+  let called = false;
+  function assert() {
+    if (!called) {
+      called = true;
+      return;
+    }
+    throw new Error(
+      "[anatomy] .part(...) should only be called once. Did you mean to use .extend(...) ?"
+    );
+  }
+  function parts14(...values) {
+    assert();
+    for (const part of values) {
+      map[part] = toPart(part);
+    }
+    return anatomy(name, map);
+  }
+  function extend(...parts22) {
+    for (const part of parts22) {
+      if (part in map)
+        continue;
+      map[part] = toPart(part);
+    }
+    return anatomy(name, map);
+  }
+  function selectors() {
+    const value = Object.fromEntries(
+      Object.entries(map).map(([key, part]) => [key, part.selector])
+    );
+    return value;
+  }
+  function classnames() {
+    const value = Object.fromEntries(
+      Object.entries(map).map(([key, part]) => [key, part.className])
+    );
+    return value;
+  }
+  function toPart(part) {
+    const el = ["container", "root"].includes(part != null ? part : "") ? [name] : [name, part];
+    const attr = el.filter(Boolean).join("__");
+    const className = `chakra-${attr}`;
+    const partObj = {
+      className,
+      selector: `.${className}`,
+      toString: () => part
+    };
+    return partObj;
+  }
+  const __type = {};
+  return {
+    parts: parts14,
+    toPart,
+    extend,
+    selectors,
+    classnames,
+    get keys() {
+      return Object.keys(map);
+    },
+    __type
+  };
+}
+
+// ../../node_modules/@chakra-ui/anatomy/dist/chunk-HAKT6JCA.mjs
+var accordionAnatomy = anatomy("accordion").parts("root", "container", "button", "panel").extend("icon");
+var alertAnatomy = anatomy("alert").parts("title", "description", "container").extend("icon", "spinner");
+var avatarAnatomy = anatomy("avatar").parts("label", "badge", "container").extend("excessLabel", "group");
+var breadcrumbAnatomy = anatomy("breadcrumb").parts("link", "item", "container").extend("separator");
+anatomy("button").parts();
+var checkboxAnatomy = anatomy("checkbox").parts("control", "icon", "container").extend("label");
+anatomy("progress").parts("track", "filledTrack").extend("label");
+var drawerAnatomy = anatomy("drawer").parts("overlay", "dialogContainer", "dialog").extend("header", "closeButton", "body", "footer");
+var editableAnatomy = anatomy("editable").parts(
+  "preview",
+  "input",
+  "textarea"
+);
+var formAnatomy = anatomy("form").parts(
+  "container",
+  "requiredIndicator",
+  "helperText"
+);
+var formErrorAnatomy = anatomy("formError").parts("text", "icon");
+var inputAnatomy = anatomy("input").parts("addon", "field", "element");
+var listAnatomy = anatomy("list").parts("container", "item", "icon");
+var menuAnatomy = anatomy("menu").parts("button", "list", "item").extend("groupTitle", "command", "divider");
+var modalAnatomy = anatomy("modal").parts("overlay", "dialogContainer", "dialog").extend("header", "closeButton", "body", "footer");
+var numberInputAnatomy = anatomy("numberinput").parts(
+  "root",
+  "field",
+  "stepperGroup",
+  "stepper"
+);
+anatomy("pininput").parts("field");
+var popoverAnatomy = anatomy("popover").parts("content", "header", "body", "footer").extend("popper", "arrow", "closeButton");
+var progressAnatomy = anatomy("progress").parts(
+  "label",
+  "filledTrack",
+  "track"
+);
+var radioAnatomy = anatomy("radio").parts(
+  "container",
+  "control",
+  "label"
+);
+var selectAnatomy = anatomy("select").parts("field", "icon");
+var sliderAnatomy = anatomy("slider").parts(
+  "container",
+  "track",
+  "thumb",
+  "filledTrack",
+  "mark"
+);
+var statAnatomy = anatomy("stat").parts(
+  "container",
+  "label",
+  "helpText",
+  "number",
+  "icon"
+);
+var switchAnatomy = anatomy("switch").parts(
+  "container",
+  "track",
+  "thumb"
+);
+var tableAnatomy = anatomy("table").parts(
+  "table",
+  "thead",
+  "tbody",
+  "tr",
+  "th",
+  "td",
+  "tfoot",
+  "caption"
+);
+var tabsAnatomy = anatomy("tabs").parts(
+  "root",
+  "tab",
+  "tablist",
+  "tabpanel",
+  "tabpanels",
+  "indicator"
+);
+var tagAnatomy = anatomy("tag").parts(
+  "container",
+  "label",
+  "closeButton"
+);
+var cardAnatomy = anatomy("card").parts(
+  "container",
+  "header",
+  "body",
+  "footer"
+);
+var { defineMultiStyleConfig: defineMultiStyleConfig2, definePartsStyle: definePartsStyle2 } = createMultiStyleConfigHelpers(switchAnatomy.keys);
 var $width = cssVar$1("switch-track-width");
 var $height = cssVar$1("switch-track-height");
 var $diff = cssVar$1("switch-track-diff");
@@ -7167,7 +7548,7 @@ var baseStyleThumb = defineStyle({
     transform: `translateX(${$translateX.reference})`
   }
 });
-var baseStyle = definePartsStyle((props) => ({
+var baseStyle2 = definePartsStyle2((props) => ({
   container: {
     [$diff.variable]: diffValue,
     [$translateX.variable]: $diff.reference,
@@ -7179,35 +7560,35 @@ var baseStyle = definePartsStyle((props) => ({
   thumb: baseStyleThumb
 }));
 var sizes2 = {
-  sm: definePartsStyle({
+  sm: definePartsStyle2({
     container: {
       [$width.variable]: "1.375rem",
       [$height.variable]: "sizes.3"
     }
   }),
-  md: definePartsStyle({
+  md: definePartsStyle2({
     container: {
       [$width.variable]: "1.875rem",
       [$height.variable]: "sizes.4"
     }
   }),
-  lg: definePartsStyle({
+  lg: definePartsStyle2({
     container: {
       [$width.variable]: "2.875rem",
       [$height.variable]: "sizes.6"
     }
   })
 };
-var switchTheme = defineMultiStyleConfig({
-  baseStyle,
+var switchTheme = defineMultiStyleConfig2({
+  baseStyle: baseStyle2,
   sizes: sizes2,
   defaultProps: {
     size: "md",
     colorScheme: "blue"
   }
 });
-var { defineMultiStyleConfig: defineMultiStyleConfig2, definePartsStyle: definePartsStyle2 } = createMultiStyleConfigHelpers(tableAnatomy.keys);
-var baseStyle2 = definePartsStyle2({
+var { defineMultiStyleConfig: defineMultiStyleConfig3, definePartsStyle: definePartsStyle3 } = createMultiStyleConfigHelpers(tableAnatomy.keys);
+var baseStyle3 = definePartsStyle3({
   table: {
     fontVariantNumeric: "lining-nums tabular-nums",
     borderCollapse: "collapse",
@@ -7235,7 +7616,7 @@ var numericStyles = defineStyle({
     textAlign: "end"
   }
 });
-var variantSimple = definePartsStyle2((props) => {
+var variantSimple = definePartsStyle3((props) => {
   const { colorScheme: c } = props;
   return {
     th: {
@@ -7261,7 +7642,7 @@ var variantSimple = definePartsStyle2((props) => {
     }
   };
 });
-var variantStripe = definePartsStyle2((props) => {
+var variantStripe = definePartsStyle3((props) => {
   const { colorScheme: c } = props;
   return {
     th: {
@@ -7306,7 +7687,7 @@ var variants = {
   unstyled: defineStyle({})
 };
 var sizes3 = {
-  sm: definePartsStyle2({
+  sm: definePartsStyle3({
     th: {
       px: "4",
       py: "1",
@@ -7325,7 +7706,7 @@ var sizes3 = {
       fontSize: "xs"
     }
   }),
-  md: definePartsStyle2({
+  md: definePartsStyle3({
     th: {
       px: "6",
       py: "3",
@@ -7343,7 +7724,7 @@ var sizes3 = {
       fontSize: "sm"
     }
   }),
-  lg: definePartsStyle2({
+  lg: definePartsStyle3({
     th: {
       px: "8",
       py: "4",
@@ -7362,8 +7743,8 @@ var sizes3 = {
     }
   })
 };
-var tableTheme = defineMultiStyleConfig2({
-  baseStyle: baseStyle2,
+var tableTheme = defineMultiStyleConfig3({
+  baseStyle: baseStyle3,
   variants,
   sizes: sizes3,
   defaultProps: {
@@ -7375,7 +7756,7 @@ var tableTheme = defineMultiStyleConfig2({
 var $fg = cssVar("tabs-color");
 var $bg2 = cssVar("tabs-bg");
 var $border = cssVar("tabs-border-color");
-var { defineMultiStyleConfig: defineMultiStyleConfig3, definePartsStyle: definePartsStyle3 } = createMultiStyleConfigHelpers(tabsAnatomy.keys);
+var { defineMultiStyleConfig: defineMultiStyleConfig4, definePartsStyle: definePartsStyle4 } = createMultiStyleConfigHelpers(tabsAnatomy.keys);
 var baseStyleRoot = defineStyle((props) => {
   const { orientation } = props;
   return {
@@ -7413,28 +7794,28 @@ var baseStyleTablist = defineStyle((props) => {
 var baseStyleTabpanel = defineStyle({
   p: 4
 });
-var baseStyle3 = definePartsStyle3((props) => ({
+var baseStyle4 = definePartsStyle4((props) => ({
   root: baseStyleRoot(props),
   tab: baseStyleTab(props),
   tablist: baseStyleTablist(props),
   tabpanel: baseStyleTabpanel
 }));
 var sizes4 = {
-  sm: definePartsStyle3({
+  sm: definePartsStyle4({
     tab: {
       py: 1,
       px: 4,
       fontSize: "sm"
     }
   }),
-  md: definePartsStyle3({
+  md: definePartsStyle4({
     tab: {
       fontSize: "md",
       py: 2,
       px: 4
     }
   }),
-  lg: definePartsStyle3({
+  lg: definePartsStyle4({
     tab: {
       fontSize: "lg",
       py: 3,
@@ -7442,10 +7823,10 @@ var sizes4 = {
     }
   })
 };
-var variantLine = definePartsStyle3((props) => {
+var variantLine = definePartsStyle4((props) => {
   const { colorScheme: c, orientation } = props;
   const isVertical = orientation === "vertical";
-  const borderProp = orientation === "vertical" ? "borderStart" : "borderBottom";
+  const borderProp = isVertical ? "borderStart" : "borderBottom";
   const marginProp = isVertical ? "marginStart" : "marginBottom";
   return {
     tablist: {
@@ -7477,7 +7858,7 @@ var variantLine = definePartsStyle3((props) => {
     }
   };
 });
-var variantEnclosed = definePartsStyle3((props) => {
+var variantEnclosed = definePartsStyle4((props) => {
   const { colorScheme: c } = props;
   return {
     tab: {
@@ -7505,7 +7886,7 @@ var variantEnclosed = definePartsStyle3((props) => {
     }
   };
 });
-var variantEnclosedColored = definePartsStyle3((props) => {
+var variantEnclosedColored = definePartsStyle4((props) => {
   const { colorScheme: c } = props;
   return {
     tab: {
@@ -7540,7 +7921,7 @@ var variantEnclosedColored = definePartsStyle3((props) => {
     }
   };
 });
-var variantSoftRounded = definePartsStyle3((props) => {
+var variantSoftRounded = definePartsStyle4((props) => {
   const { colorScheme: c, theme: theme3 } = props;
   return {
     tab: {
@@ -7554,7 +7935,7 @@ var variantSoftRounded = definePartsStyle3((props) => {
     }
   };
 });
-var variantSolidRounded = definePartsStyle3((props) => {
+var variantSolidRounded = definePartsStyle4((props) => {
   const { colorScheme: c } = props;
   return {
     tab: {
@@ -7577,7 +7958,7 @@ var variantSolidRounded = definePartsStyle3((props) => {
     }
   };
 });
-var variantUnstyled = definePartsStyle3({});
+var variantUnstyled = definePartsStyle4({});
 var variants2 = {
   line: variantLine,
   enclosed: variantEnclosed,
@@ -7586,8 +7967,8 @@ var variants2 = {
   "solid-rounded": variantSolidRounded,
   unstyled: variantUnstyled
 };
-var tabsTheme = defineMultiStyleConfig3({
-  baseStyle: baseStyle3,
+var tabsTheme = defineMultiStyleConfig4({
+  baseStyle: baseStyle4,
   sizes: sizes4,
   variants: variants2,
   defaultProps: {
@@ -7597,7 +7978,7 @@ var tabsTheme = defineMultiStyleConfig3({
   }
 });
 var vars = defineCssVars("badge", ["bg", "color", "shadow"]);
-var baseStyle4 = defineStyle({
+var baseStyle5 = defineStyle({
   px: 1,
   textTransform: "uppercase",
   fontSize: "xs",
@@ -7648,7 +8029,7 @@ var variants3 = {
   outline: variantOutline
 };
 var badgeTheme = defineStyleConfig({
-  baseStyle: baseStyle4,
+  baseStyle: baseStyle5,
   variants: variants3,
   defaultProps: {
     variant: "subtle",
@@ -7656,18 +8037,32 @@ var badgeTheme = defineStyleConfig({
   }
 });
 
-// ../../node_modules/@chakra-ui/theme/dist/chunk-CZP5TVGH.mjs
-var { defineMultiStyleConfig: defineMultiStyleConfig4, definePartsStyle: definePartsStyle4 } = createMultiStyleConfigHelpers(tagAnatomy.keys);
+// ../../node_modules/@chakra-ui/theme/dist/chunk-XJB4FHJM.mjs
+var { defineMultiStyleConfig: defineMultiStyleConfig5, definePartsStyle: definePartsStyle5 } = createMultiStyleConfigHelpers(tagAnatomy.keys);
+var $bg3 = cssVar("tag-bg");
+var $color = cssVar("tag-color");
+var $shadow = cssVar("tag-shadow");
+var $minH = cssVar("tag-min-height");
+var $minW = cssVar("tag-min-width");
+var $fontSize = cssVar("tag-font-size");
+var $paddingX = cssVar("tag-padding-inline");
 var baseStyleContainer = defineStyle({
   fontWeight: "medium",
   lineHeight: 1.2,
   outline: 0,
-  color: vars.color.reference,
-  bg: vars.bg.reference,
-  boxShadow: vars.shadow.reference,
+  [$color.variable]: vars.color.reference,
+  [$bg3.variable]: vars.bg.reference,
+  [$shadow.variable]: vars.shadow.reference,
+  color: $color.reference,
+  bg: $bg3.reference,
+  boxShadow: $shadow.reference,
   borderRadius: "md",
+  minH: $minH.reference,
+  minW: $minW.reference,
+  fontSize: $fontSize.reference,
+  px: $paddingX.reference,
   _focusVisible: {
-    boxShadow: "outline"
+    [$shadow.variable]: "shadows.outline"
   }
 });
 var baseStyleLabel = defineStyle({
@@ -7698,64 +8093,64 @@ var baseStyleCloseButton = defineStyle({
     opacity: 1
   }
 });
-var baseStyle5 = definePartsStyle4({
+var baseStyle6 = definePartsStyle5({
   container: baseStyleContainer,
   label: baseStyleLabel,
   closeButton: baseStyleCloseButton
 });
 var sizes5 = {
-  sm: definePartsStyle4({
+  sm: definePartsStyle5({
     container: {
-      minH: "5",
-      minW: "5",
-      fontSize: "xs",
-      px: "2"
+      [$minH.variable]: "sizes.5",
+      [$minW.variable]: "sizes.5",
+      [$fontSize.variable]: "fontSizes.xs",
+      [$paddingX.variable]: "space.2"
     },
     closeButton: {
       marginEnd: "-2px",
       marginStart: "0.35rem"
     }
   }),
-  md: definePartsStyle4({
+  md: definePartsStyle5({
     container: {
-      minH: "6",
-      minW: "6",
-      fontSize: "sm",
-      px: "2"
+      [$minH.variable]: "sizes.6",
+      [$minW.variable]: "sizes.6",
+      [$fontSize.variable]: "fontSizes.sm",
+      [$paddingX.variable]: "space.2"
     }
   }),
-  lg: definePartsStyle4({
+  lg: definePartsStyle5({
     container: {
-      minH: "8",
-      minW: "8",
-      fontSize: "md",
-      px: "3"
+      [$minH.variable]: "sizes.8",
+      [$minW.variable]: "sizes.8",
+      [$fontSize.variable]: "fontSizes.md",
+      [$paddingX.variable]: "space.3"
     }
   })
 };
 var variants4 = {
-  subtle: definePartsStyle4((props) => {
+  subtle: definePartsStyle5((props) => {
     var _a6;
     return {
       container: (_a6 = badgeTheme.variants) == null ? void 0 : _a6.subtle(props)
     };
   }),
-  solid: definePartsStyle4((props) => {
+  solid: definePartsStyle5((props) => {
     var _a6;
     return {
       container: (_a6 = badgeTheme.variants) == null ? void 0 : _a6.solid(props)
     };
   }),
-  outline: definePartsStyle4((props) => {
+  outline: definePartsStyle5((props) => {
     var _a6;
     return {
       container: (_a6 = badgeTheme.variants) == null ? void 0 : _a6.outline(props)
     };
   })
 };
-var tagTheme = defineMultiStyleConfig4({
+var tagTheme = defineMultiStyleConfig5({
   variants: variants4,
-  baseStyle: baseStyle5,
+  baseStyle: baseStyle6,
   sizes: sizes5,
   defaultProps: {
     size: "md",
@@ -7763,8 +8158,8 @@ var tagTheme = defineMultiStyleConfig4({
     colorScheme: "gray"
   }
 });
-var { definePartsStyle: definePartsStyle5, defineMultiStyleConfig: defineMultiStyleConfig5 } = createMultiStyleConfigHelpers(inputAnatomy.keys);
-var baseStyle6 = definePartsStyle5({
+var { definePartsStyle: definePartsStyle6, defineMultiStyleConfig: defineMultiStyleConfig6 } = createMultiStyleConfigHelpers(inputAnatomy.keys);
+var baseStyle7 = definePartsStyle6({
   field: {
     width: "100%",
     minWidth: 0,
@@ -7806,19 +8201,19 @@ var size = {
   })
 };
 var sizes6 = {
-  lg: definePartsStyle5({
+  lg: definePartsStyle6({
     field: size.lg,
     addon: size.lg
   }),
-  md: definePartsStyle5({
+  md: definePartsStyle6({
     field: size.md,
     addon: size.md
   }),
-  sm: definePartsStyle5({
+  sm: definePartsStyle6({
     field: size.sm,
     addon: size.sm
   }),
-  xs: definePartsStyle5({
+  xs: definePartsStyle6({
     field: size.xs,
     addon: size.xs
   })
@@ -7830,7 +8225,7 @@ function getDefaults(props) {
     errorBorderColor: ec || mode("red.500", "red.300")(props)
   };
 }
-var variantOutline2 = definePartsStyle5((props) => {
+var variantOutline2 = definePartsStyle6((props) => {
   const { theme: theme3 } = props;
   const { focusBorderColor: fc, errorBorderColor: ec } = getDefaults(props);
   return {
@@ -7862,7 +8257,7 @@ var variantOutline2 = definePartsStyle5((props) => {
     }
   };
 });
-var variantFilled = definePartsStyle5((props) => {
+var variantFilled = definePartsStyle6((props) => {
   const { theme: theme3 } = props;
   const { focusBorderColor: fc, errorBorderColor: ec } = getDefaults(props);
   return {
@@ -7892,7 +8287,7 @@ var variantFilled = definePartsStyle5((props) => {
     }
   };
 });
-var variantFlushed = definePartsStyle5((props) => {
+var variantFlushed = definePartsStyle6((props) => {
   const { theme: theme3 } = props;
   const { focusBorderColor: fc, errorBorderColor: ec } = getDefaults(props);
   return {
@@ -7924,7 +8319,7 @@ var variantFlushed = definePartsStyle5((props) => {
     }
   };
 });
-var variantUnstyled2 = definePartsStyle5({
+var variantUnstyled2 = definePartsStyle6({
   field: {
     bg: "transparent",
     px: "0",
@@ -7942,8 +8337,8 @@ var variants5 = {
   flushed: variantFlushed,
   unstyled: variantUnstyled2
 };
-var inputTheme = defineMultiStyleConfig5({
-  baseStyle: baseStyle6,
+var inputTheme = defineMultiStyleConfig6({
+  baseStyle: baseStyle7,
   sizes: sizes6,
   variants: variants5,
   defaultProps: {
@@ -7954,7 +8349,7 @@ var inputTheme = defineMultiStyleConfig5({
 
 // ../../node_modules/@chakra-ui/theme/dist/chunk-OIGZPHLT.mjs
 var _a;
-var baseStyle7 = defineStyle({
+var baseStyle8 = defineStyle({
   ...(_a = inputTheme.baseStyle) == null ? void 0 : _a.field,
   paddingY: "2",
   minHeight: "20",
@@ -7999,7 +8394,7 @@ var sizes7 = {
   lg: (_h = (_g = inputTheme.sizes) == null ? void 0 : _g.lg.field) != null ? _h : {}
 };
 var textareaTheme = defineStyleConfig({
-  baseStyle: baseStyle7,
+  baseStyle: baseStyle8,
   sizes: sizes7,
   variants: variants6,
   defaultProps: {
@@ -8007,19 +8402,19 @@ var textareaTheme = defineStyleConfig({
     variant: "outline"
   }
 });
-var $bg3 = cssVar$1("tooltip-bg");
+var $bg4 = cssVar$1("tooltip-bg");
 var $fg2 = cssVar$1("tooltip-fg");
 var $arrowBg = cssVar$1("popper-arrow-bg");
-var baseStyle8 = defineStyle({
-  bg: $bg3.reference,
+var baseStyle9 = defineStyle({
+  bg: $bg4.reference,
   color: $fg2.reference,
-  [$bg3.variable]: "colors.gray.700",
+  [$bg4.variable]: "colors.gray.700",
   [$fg2.variable]: "colors.whiteAlpha.900",
   _dark: {
-    [$bg3.variable]: "colors.gray.300",
+    [$bg4.variable]: "colors.gray.300",
     [$fg2.variable]: "colors.gray.900"
   },
-  [$arrowBg.variable]: $bg3.reference,
+  [$arrowBg.variable]: $bg4.reference,
   px: "2",
   py: "0.5",
   borderRadius: "sm",
@@ -8030,9 +8425,9 @@ var baseStyle8 = defineStyle({
   zIndex: "tooltip"
 });
 var tooltipTheme = defineStyleConfig({
-  baseStyle: baseStyle8
+  baseStyle: baseStyle9
 });
-var { defineMultiStyleConfig: defineMultiStyleConfig6, definePartsStyle: definePartsStyle6 } = createMultiStyleConfigHelpers(progressAnatomy.keys);
+var { defineMultiStyleConfig: defineMultiStyleConfig7, definePartsStyle: definePartsStyle7 } = createMultiStyleConfigHelpers(progressAnatomy.keys);
 var filledStyle = defineStyle((props) => {
   const { colorScheme: c, theme: t2, isIndeterminate, hasStripe } = props;
   const stripeStyle = mode(
@@ -8070,28 +8465,28 @@ var baseStyleFilledTrack = defineStyle((props) => {
     ...filledStyle(props)
   };
 });
-var baseStyle9 = definePartsStyle6((props) => ({
+var baseStyle10 = definePartsStyle7((props) => ({
   label: baseStyleLabel2,
   filledTrack: baseStyleFilledTrack(props),
   track: baseStyleTrack2(props)
 }));
 var sizes8 = {
-  xs: definePartsStyle6({
+  xs: definePartsStyle7({
     track: { h: "1" }
   }),
-  sm: definePartsStyle6({
+  sm: definePartsStyle7({
     track: { h: "2" }
   }),
-  md: definePartsStyle6({
+  md: definePartsStyle7({
     track: { h: "3" }
   }),
-  lg: definePartsStyle6({
+  lg: definePartsStyle7({
     track: { h: "4" }
   })
 };
-var progressTheme = defineMultiStyleConfig6({
+var progressTheme = defineMultiStyleConfig7({
   sizes: sizes8,
-  baseStyle: baseStyle9,
+  baseStyle: baseStyle10,
   defaultProps: {
     size: "md",
     colorScheme: "blue"
@@ -8103,13 +8498,13 @@ var isFunction = (value) => typeof value === "function";
 function runIfFn(valueOrFn, ...args) {
   return isFunction(valueOrFn) ? valueOrFn(...args) : valueOrFn;
 }
-var { definePartsStyle: definePartsStyle7, defineMultiStyleConfig: defineMultiStyleConfig7 } = createMultiStyleConfigHelpers(checkboxAnatomy.keys);
-var $size = cssVar("checkbox-size");
+var { definePartsStyle: definePartsStyle8, defineMultiStyleConfig: defineMultiStyleConfig8 } = createMultiStyleConfigHelpers(checkboxAnatomy.keys);
+var $size2 = cssVar("checkbox-size");
 var baseStyleControl = defineStyle((props) => {
   const { colorScheme: c } = props;
   return {
-    w: $size.reference,
-    h: $size.reference,
+    w: $size2.reference,
+    h: $size2.reference,
     transitionProperty: "box-shadow",
     transitionDuration: "normal",
     border: "2px solid",
@@ -8158,31 +8553,31 @@ var baseStyleIcon = defineStyle({
   transitionProperty: "transform",
   transitionDuration: "normal"
 });
-var baseStyle10 = definePartsStyle7((props) => ({
+var baseStyle11 = definePartsStyle8((props) => ({
   icon: baseStyleIcon,
   container: baseStyleContainer2,
   control: runIfFn(baseStyleControl, props),
   label: baseStyleLabel3
 }));
 var sizes9 = {
-  sm: definePartsStyle7({
-    control: { [$size.variable]: "sizes.3" },
+  sm: definePartsStyle8({
+    control: { [$size2.variable]: "sizes.3" },
     label: { fontSize: "sm" },
     icon: { fontSize: "3xs" }
   }),
-  md: definePartsStyle7({
-    control: { [$size.variable]: "sizes.4" },
+  md: definePartsStyle8({
+    control: { [$size2.variable]: "sizes.4" },
     label: { fontSize: "md" },
     icon: { fontSize: "2xs" }
   }),
-  lg: definePartsStyle7({
-    control: { [$size.variable]: "sizes.5" },
+  lg: definePartsStyle8({
+    control: { [$size2.variable]: "sizes.5" },
     label: { fontSize: "lg" },
     icon: { fontSize: "2xs" }
   })
 };
-var checkboxTheme = defineMultiStyleConfig7({
-  baseStyle: baseStyle10,
+var checkboxTheme = defineMultiStyleConfig8({
+  baseStyle: baseStyle11,
   sizes: sizes9,
   defaultProps: {
     size: "md",
@@ -8191,7 +8586,7 @@ var checkboxTheme = defineMultiStyleConfig7({
 });
 
 // ../../node_modules/@chakra-ui/theme/dist/chunk-JDPWIQ7H.mjs
-var { defineMultiStyleConfig: defineMultiStyleConfig8, definePartsStyle: definePartsStyle8 } = createMultiStyleConfigHelpers(radioAnatomy.keys);
+var { defineMultiStyleConfig: defineMultiStyleConfig9, definePartsStyle: definePartsStyle9 } = createMultiStyleConfigHelpers(radioAnatomy.keys);
 var baseStyleControl2 = defineStyle((props) => {
   var _a6;
   const controlStyle = (_a6 = runIfFn(checkboxTheme.baseStyle, props)) == null ? void 0 : _a6.control;
@@ -8212,7 +8607,7 @@ var baseStyleControl2 = defineStyle((props) => {
     }
   };
 });
-var baseStyle11 = definePartsStyle8((props) => {
+var baseStyle12 = definePartsStyle9((props) => {
   var _a6, _b5, _c3, _d3;
   return {
     label: (_b5 = (_a6 = checkboxTheme).baseStyle) == null ? void 0 : _b5.call(_a6, props).label,
@@ -8221,21 +8616,21 @@ var baseStyle11 = definePartsStyle8((props) => {
   };
 });
 var sizes10 = {
-  md: definePartsStyle8({
+  md: definePartsStyle9({
     control: { w: "4", h: "4" },
     label: { fontSize: "md" }
   }),
-  lg: definePartsStyle8({
+  lg: definePartsStyle9({
     control: { w: "5", h: "5" },
     label: { fontSize: "lg" }
   }),
-  sm: definePartsStyle8({
+  sm: definePartsStyle9({
     control: { width: "3", height: "3" },
     label: { fontSize: "sm" }
   })
 };
-var radioTheme = defineMultiStyleConfig8({
-  baseStyle: baseStyle11,
+var radioTheme = defineMultiStyleConfig9({
+  baseStyle: baseStyle12,
   sizes: sizes10,
   defaultProps: {
     size: "md",
@@ -8244,21 +8639,21 @@ var radioTheme = defineMultiStyleConfig8({
 });
 
 // ../../node_modules/@chakra-ui/theme/dist/chunk-V3RHVDKJ.mjs
-var { defineMultiStyleConfig: defineMultiStyleConfig9, definePartsStyle: definePartsStyle9 } = createMultiStyleConfigHelpers(selectAnatomy.keys);
-var $bg4 = cssVar("select-bg");
+var { defineMultiStyleConfig: defineMultiStyleConfig10, definePartsStyle: definePartsStyle10 } = createMultiStyleConfigHelpers(selectAnatomy.keys);
+var $bg5 = cssVar("select-bg");
 var _a4;
 var baseStyleField = defineStyle({
   ...(_a4 = inputTheme.baseStyle) == null ? void 0 : _a4.field,
   appearance: "none",
   paddingBottom: "1px",
   lineHeight: "normal",
-  bg: $bg4.reference,
-  [$bg4.variable]: "colors.white",
+  bg: $bg5.reference,
+  [$bg5.variable]: "colors.white",
   _dark: {
-    [$bg4.variable]: "colors.gray.700"
+    [$bg5.variable]: "colors.gray.700"
   },
   "> option, > optgroup": {
-    bg: $bg4.reference
+    bg: $bg5.reference
   }
 });
 var baseStyleIcon2 = defineStyle({
@@ -8272,7 +8667,7 @@ var baseStyleIcon2 = defineStyle({
     opacity: 0.5
   }
 });
-var baseStyle12 = definePartsStyle9({
+var baseStyle13 = definePartsStyle10({
   field: baseStyleField,
   icon: baseStyleIcon2
 });
@@ -8320,8 +8715,8 @@ var sizes11 = {
     }
   }
 };
-var selectTheme = defineMultiStyleConfig9({
-  baseStyle: baseStyle12,
+var selectTheme = defineMultiStyleConfig10({
+  baseStyle: baseStyle13,
   sizes: sizes11,
   variants: inputTheme.variants,
   defaultProps: inputTheme.defaultProps
@@ -8330,7 +8725,7 @@ var selectTheme = defineMultiStyleConfig9({
 // ../../node_modules/@chakra-ui/theme/dist/chunk-YSULOCDF.mjs
 var $startColor = cssVar("skeleton-start-color");
 var $endColor = cssVar("skeleton-end-color");
-var baseStyle13 = defineStyle({
+var baseStyle14 = defineStyle({
   [$startColor.variable]: "colors.gray.100",
   [$endColor.variable]: "colors.gray.400",
   _dark: {
@@ -8343,12 +8738,12 @@ var baseStyle13 = defineStyle({
   borderRadius: "sm"
 });
 var skeletonTheme = defineStyleConfig({
-  baseStyle: baseStyle13
+  baseStyle: baseStyle14
 });
 
 // ../../node_modules/@chakra-ui/theme/dist/chunk-RSEFU3LC.mjs
-var $bg5 = cssVar("skip-link-bg");
-var baseStyle14 = defineStyle({
+var $bg6 = cssVar("skip-link-bg");
+var baseStyle15 = defineStyle({
   borderRadius: "md",
   fontWeight: "semibold",
   _focusVisible: {
@@ -8357,20 +8752,20 @@ var baseStyle14 = defineStyle({
     position: "fixed",
     top: "6",
     insetStart: "6",
-    [$bg5.variable]: "colors.white",
+    [$bg6.variable]: "colors.white",
     _dark: {
-      [$bg5.variable]: "colors.gray.700"
+      [$bg6.variable]: "colors.gray.700"
     },
-    bg: $bg5.reference
+    bg: $bg6.reference
   }
 });
 var skipLinkTheme = defineStyleConfig({
-  baseStyle: baseStyle14
+  baseStyle: baseStyle15
 });
-var { defineMultiStyleConfig: defineMultiStyleConfig10, definePartsStyle: definePartsStyle10 } = createMultiStyleConfigHelpers(sliderAnatomy.keys);
+var { defineMultiStyleConfig: defineMultiStyleConfig11, definePartsStyle: definePartsStyle11 } = createMultiStyleConfigHelpers(sliderAnatomy.keys);
 var $thumbSize = cssVar("slider-thumb-size");
 var $trackSize = cssVar("slider-track-size");
-var $bg6 = cssVar("slider-bg");
+var $bg7 = cssVar("slider-bg");
 var baseStyleContainer3 = defineStyle((props) => {
   const { orientation } = props;
   return {
@@ -8399,17 +8794,17 @@ var baseStyleTrack3 = defineStyle((props) => {
     ...orientationStyles,
     overflow: "hidden",
     borderRadius: "sm",
-    [$bg6.variable]: "colors.gray.200",
+    [$bg7.variable]: "colors.gray.200",
     _dark: {
-      [$bg6.variable]: "colors.whiteAlpha.200"
+      [$bg7.variable]: "colors.whiteAlpha.200"
     },
     _disabled: {
-      [$bg6.variable]: "colors.gray.300",
+      [$bg7.variable]: "colors.gray.300",
       _dark: {
-        [$bg6.variable]: "colors.whiteAlpha.300"
+        [$bg7.variable]: "colors.whiteAlpha.300"
       }
     },
-    bg: $bg6.reference
+    bg: $bg7.reference
   };
 });
 var baseStyleThumb2 = defineStyle((props) => {
@@ -8461,32 +8856,32 @@ var baseStyleFilledTrack2 = defineStyle((props) => {
   return {
     width: "inherit",
     height: "inherit",
-    [$bg6.variable]: `colors.${c}.500`,
+    [$bg7.variable]: `colors.${c}.500`,
     _dark: {
-      [$bg6.variable]: `colors.${c}.200`
+      [$bg7.variable]: `colors.${c}.200`
     },
-    bg: $bg6.reference
+    bg: $bg7.reference
   };
 });
-var baseStyle15 = definePartsStyle10((props) => ({
+var baseStyle16 = definePartsStyle11((props) => ({
   container: baseStyleContainer3(props),
   track: baseStyleTrack3(props),
   thumb: baseStyleThumb2(props),
   filledTrack: baseStyleFilledTrack2(props)
 }));
-var sizeLg = definePartsStyle10({
+var sizeLg = definePartsStyle11({
   container: {
     [$thumbSize.variable]: `sizes.4`,
     [$trackSize.variable]: `sizes.1`
   }
 });
-var sizeMd = definePartsStyle10({
+var sizeMd = definePartsStyle11({
   container: {
     [$thumbSize.variable]: `sizes.3.5`,
     [$trackSize.variable]: `sizes.1`
   }
 });
-var sizeSm = definePartsStyle10({
+var sizeSm = definePartsStyle11({
   container: {
     [$thumbSize.variable]: `sizes.2.5`,
     [$trackSize.variable]: `sizes.0.5`
@@ -8497,38 +8892,38 @@ var sizes12 = {
   md: sizeMd,
   sm: sizeSm
 };
-var sliderTheme = defineMultiStyleConfig10({
-  baseStyle: baseStyle15,
+var sliderTheme = defineMultiStyleConfig11({
+  baseStyle: baseStyle16,
   sizes: sizes12,
   defaultProps: {
     size: "md",
     colorScheme: "blue"
   }
 });
-var $size2 = cssVar$1("spinner-size");
-var baseStyle16 = defineStyle({
-  width: [$size2.reference],
-  height: [$size2.reference]
+var $size3 = cssVar$1("spinner-size");
+var baseStyle17 = defineStyle({
+  width: [$size3.reference],
+  height: [$size3.reference]
 });
 var sizes13 = {
   xs: defineStyle({
-    [$size2.variable]: "sizes.3"
+    [$size3.variable]: "sizes.3"
   }),
   sm: defineStyle({
-    [$size2.variable]: "sizes.4"
+    [$size3.variable]: "sizes.4"
   }),
   md: defineStyle({
-    [$size2.variable]: "sizes.6"
+    [$size3.variable]: "sizes.6"
   }),
   lg: defineStyle({
-    [$size2.variable]: "sizes.8"
+    [$size3.variable]: "sizes.8"
   }),
   xl: defineStyle({
-    [$size2.variable]: "sizes.12"
+    [$size3.variable]: "sizes.12"
   })
 };
 var spinnerTheme = defineStyleConfig({
-  baseStyle: baseStyle16,
+  baseStyle: baseStyle17,
   sizes: sizes13,
   defaultProps: {
     size: "md"
@@ -8536,7 +8931,7 @@ var spinnerTheme = defineStyleConfig({
 });
 
 // ../../node_modules/@chakra-ui/theme/dist/chunk-EY6ACYQS.mjs
-var { defineMultiStyleConfig: defineMultiStyleConfig11, definePartsStyle: definePartsStyle11 } = createMultiStyleConfigHelpers(statAnatomy.keys);
+var { defineMultiStyleConfig: defineMultiStyleConfig12, definePartsStyle: definePartsStyle12 } = createMultiStyleConfigHelpers(statAnatomy.keys);
 var baseStyleLabel4 = defineStyle({
   fontWeight: "medium"
 });
@@ -8554,7 +8949,7 @@ var baseStyleIcon3 = defineStyle({
   h: "3.5",
   verticalAlign: "middle"
 });
-var baseStyle17 = definePartsStyle11({
+var baseStyle18 = definePartsStyle12({
   container: {},
   label: baseStyleLabel4,
   helpText: baseStyleHelpText,
@@ -8562,14 +8957,14 @@ var baseStyle17 = definePartsStyle11({
   icon: baseStyleIcon3
 });
 var sizes14 = {
-  md: definePartsStyle11({
+  md: definePartsStyle12({
     label: { fontSize: "sm" },
     helpText: { fontSize: "sm" },
     number: { fontSize: "2xl" }
   })
 };
-var statTheme = defineMultiStyleConfig11({
-  baseStyle: baseStyle17,
+var statTheme = defineMultiStyleConfig12({
+  baseStyle: baseStyle18,
   sizes: sizes14,
   defaultProps: {
     size: "md"
@@ -8577,13 +8972,13 @@ var statTheme = defineMultiStyleConfig11({
 });
 
 // ../../node_modules/@chakra-ui/theme/dist/chunk-VQ2DUS6J.mjs
-var $bg7 = cssVar("kbd-bg");
-var baseStyle18 = defineStyle({
-  [$bg7.variable]: "colors.gray.100",
+var $bg8 = cssVar("kbd-bg");
+var baseStyle19 = defineStyle({
+  [$bg8.variable]: "colors.gray.100",
   _dark: {
-    [$bg7.variable]: "colors.whiteAlpha.100"
+    [$bg8.variable]: "colors.whiteAlpha.100"
   },
-  bg: $bg7.reference,
+  bg: $bg8.reference,
   borderRadius: "md",
   borderWidth: "1px",
   borderBottomWidth: "3px",
@@ -8594,11 +8989,11 @@ var baseStyle18 = defineStyle({
   whiteSpace: "nowrap"
 });
 var kbdTheme = defineStyleConfig({
-  baseStyle: baseStyle18
+  baseStyle: baseStyle19
 });
 
 // ../../node_modules/@chakra-ui/theme/dist/chunk-2T5TO72C.mjs
-var baseStyle19 = defineStyle({
+var baseStyle20 = defineStyle({
   transitionProperty: "common",
   transitionDuration: "fast",
   transitionTimingFunction: "ease-out",
@@ -8614,33 +9009,33 @@ var baseStyle19 = defineStyle({
   }
 });
 var linkTheme = defineStyleConfig({
-  baseStyle: baseStyle19
+  baseStyle: baseStyle20
 });
 
 // ../../node_modules/@chakra-ui/theme/dist/chunk-AQJ6AIMN.mjs
-var { defineMultiStyleConfig: defineMultiStyleConfig12, definePartsStyle: definePartsStyle12 } = createMultiStyleConfigHelpers(listAnatomy.keys);
+var { defineMultiStyleConfig: defineMultiStyleConfig13, definePartsStyle: definePartsStyle13 } = createMultiStyleConfigHelpers(listAnatomy.keys);
 var baseStyleIcon4 = defineStyle({
   marginEnd: "2",
   display: "inline",
   verticalAlign: "text-bottom"
 });
-var baseStyle20 = definePartsStyle12({
+var baseStyle21 = definePartsStyle13({
   icon: baseStyleIcon4
 });
-var listTheme = defineMultiStyleConfig12({
-  baseStyle: baseStyle20
+var listTheme = defineMultiStyleConfig13({
+  baseStyle: baseStyle21
 });
 
 // ../../node_modules/@chakra-ui/theme/dist/chunk-FIWRYWVW.mjs
-var { defineMultiStyleConfig: defineMultiStyleConfig13, definePartsStyle: definePartsStyle13 } = createMultiStyleConfigHelpers(menuAnatomy.keys);
-var $bg8 = cssVar("menu-bg");
-var $shadow = cssVar("menu-shadow");
+var { defineMultiStyleConfig: defineMultiStyleConfig14, definePartsStyle: definePartsStyle14 } = createMultiStyleConfigHelpers(menuAnatomy.keys);
+var $bg9 = cssVar("menu-bg");
+var $shadow2 = cssVar("menu-shadow");
 var baseStyleList = defineStyle({
-  [$bg8.variable]: "#fff",
-  [$shadow.variable]: "shadows.sm",
+  [$bg9.variable]: "#fff",
+  [$shadow2.variable]: "shadows.sm",
   _dark: {
-    [$bg8.variable]: "colors.gray.700",
-    [$shadow.variable]: "shadows.dark-lg"
+    [$bg9.variable]: "colors.gray.700",
+    [$shadow2.variable]: "shadows.dark-lg"
   },
   color: "inherit",
   minW: "3xs",
@@ -8648,8 +9043,8 @@ var baseStyleList = defineStyle({
   zIndex: 1,
   borderRadius: "md",
   borderWidth: "1px",
-  bg: $bg8.reference,
-  boxShadow: $shadow.reference
+  bg: $bg9.reference,
+  boxShadow: $shadow2.reference
 });
 var baseStyleItem = defineStyle({
   py: "1.5",
@@ -8658,28 +9053,28 @@ var baseStyleItem = defineStyle({
   transitionDuration: "ultra-fast",
   transitionTimingFunction: "ease-in",
   _focus: {
-    [$bg8.variable]: "colors.gray.100",
+    [$bg9.variable]: "colors.gray.100",
     _dark: {
-      [$bg8.variable]: "colors.whiteAlpha.100"
+      [$bg9.variable]: "colors.whiteAlpha.100"
     }
   },
   _active: {
-    [$bg8.variable]: "colors.gray.200",
+    [$bg9.variable]: "colors.gray.200",
     _dark: {
-      [$bg8.variable]: "colors.whiteAlpha.200"
+      [$bg9.variable]: "colors.whiteAlpha.200"
     }
   },
   _expanded: {
-    [$bg8.variable]: "colors.gray.100",
+    [$bg9.variable]: "colors.gray.100",
     _dark: {
-      [$bg8.variable]: "colors.whiteAlpha.100"
+      [$bg9.variable]: "colors.whiteAlpha.100"
     }
   },
   _disabled: {
     opacity: 0.4,
     cursor: "not-allowed"
   },
-  bg: $bg8.reference
+  bg: $bg9.reference
 });
 var baseStyleGroupTitle = defineStyle({
   mx: 4,
@@ -8701,7 +9096,7 @@ var baseStyleButton = defineStyle({
   transitionProperty: "common",
   transitionDuration: "normal"
 });
-var baseStyle21 = definePartsStyle13({
+var baseStyle22 = definePartsStyle14({
   button: baseStyleButton,
   list: baseStyleList,
   item: baseStyleItem,
@@ -8709,14 +9104,14 @@ var baseStyle21 = definePartsStyle13({
   command: baseStyleCommand,
   divider: baseStyleDivider
 });
-var menuTheme = defineMultiStyleConfig13({
-  baseStyle: baseStyle21
+var menuTheme = defineMultiStyleConfig14({
+  baseStyle: baseStyle22
 });
 
-// ../../node_modules/@chakra-ui/theme/dist/chunk-LYECXC4E.mjs
-var { defineMultiStyleConfig: defineMultiStyleConfig14, definePartsStyle: definePartsStyle14 } = createMultiStyleConfigHelpers(modalAnatomy.keys);
-var $bg9 = cssVar("modal-bg");
-var $shadow2 = cssVar("modal-shadow");
+// ../../node_modules/@chakra-ui/theme/dist/chunk-XHTV2ZQR.mjs
+var { defineMultiStyleConfig: defineMultiStyleConfig15, definePartsStyle: definePartsStyle15 } = createMultiStyleConfigHelpers(modalAnatomy.keys);
+var $bg10 = cssVar("modal-bg");
+var $shadow3 = cssVar("modal-shadow");
 var baseStyleOverlay = defineStyle({
   bg: "blackAlpha.600",
   zIndex: "modal"
@@ -8733,21 +9128,22 @@ var baseStyleDialogContainer = defineStyle((props) => {
   };
 });
 var baseStyleDialog = defineStyle((props) => {
-  const { scrollBehavior } = props;
+  const { isCentered, scrollBehavior } = props;
   return {
     borderRadius: "md",
     color: "inherit",
-    my: "16",
+    my: isCentered ? "auto" : "16",
+    mx: isCentered ? "auto" : void 0,
     zIndex: "modal",
     maxH: scrollBehavior === "inside" ? "calc(100% - 7.5rem)" : void 0,
-    [$bg9.variable]: "colors.white",
-    [$shadow2.variable]: "shadows.lg",
+    [$bg10.variable]: "colors.white",
+    [$shadow3.variable]: "shadows.lg",
     _dark: {
-      [$bg9.variable]: "colors.gray.700",
-      [$shadow2.variable]: "shadows.dark-lg"
+      [$bg10.variable]: "colors.gray.700",
+      [$shadow3.variable]: "shadows.dark-lg"
     },
-    bg: $bg9.reference,
-    boxShadow: $shadow2.reference
+    bg: $bg10.reference,
+    boxShadow: $shadow3.reference
   };
 });
 var baseStyleHeader = defineStyle({
@@ -8774,7 +9170,7 @@ var baseStyleFooter = defineStyle({
   px: "6",
   py: "4"
 });
-var baseStyle22 = definePartsStyle14((props) => ({
+var baseStyle23 = definePartsStyle15((props) => ({
   overlay: baseStyleOverlay,
   dialogContainer: runIfFn(baseStyleDialogContainer, props),
   dialog: runIfFn(baseStyleDialog, props),
@@ -8785,7 +9181,7 @@ var baseStyle22 = definePartsStyle14((props) => ({
 }));
 function getSize(value) {
   if (value === "full") {
-    return definePartsStyle14({
+    return definePartsStyle15({
       dialog: {
         maxW: "100vw",
         minH: "$100vh",
@@ -8794,7 +9190,7 @@ function getSize(value) {
       }
     });
   }
-  return definePartsStyle14({
+  return definePartsStyle15({
     dialog: { maxW: value }
   });
 }
@@ -8811,16 +9207,16 @@ var sizes15 = {
   "6xl": getSize("6xl"),
   full: getSize("full")
 };
-var modalTheme = defineMultiStyleConfig14({
-  baseStyle: baseStyle22,
+var modalTheme = defineMultiStyleConfig15({
+  baseStyle: baseStyle23,
   sizes: sizes15,
   defaultProps: { size: "md" }
 });
-var { defineMultiStyleConfig: defineMultiStyleConfig15, definePartsStyle: definePartsStyle15 } = createMultiStyleConfigHelpers(numberInputAnatomy.keys);
+var { defineMultiStyleConfig: defineMultiStyleConfig16, definePartsStyle: definePartsStyle16 } = createMultiStyleConfigHelpers(numberInputAnatomy.keys);
 var $stepperWidth = cssVar$1("number-input-stepper-width");
 var $inputPadding = cssVar$1("number-input-input-padding");
 var inputPaddingValue = calc$1($stepperWidth).add("0.5rem").toString();
-var $bg10 = cssVar$1("number-input-bg");
+var $bg11 = cssVar$1("number-input-bg");
 var $fg3 = cssVar$1("number-input-color");
 var $border2 = cssVar$1("number-input-border-color");
 var baseStyleRoot2 = defineStyle({
@@ -8840,7 +9236,7 @@ var baseStyleStepper = defineStyle({
   borderStart: "1px solid",
   borderStartColor: $border2.reference,
   color: $fg3.reference,
-  bg: $bg10.reference,
+  bg: $bg11.reference,
   [$fg3.variable]: "colors.chakra-body-text",
   [$border2.variable]: "colors.chakra-border-color",
   _dark: {
@@ -8848,9 +9244,9 @@ var baseStyleStepper = defineStyle({
     [$border2.variable]: "colors.whiteAlpha.300"
   },
   _active: {
-    [$bg10.variable]: "colors.gray.200",
+    [$bg11.variable]: "colors.gray.200",
     _dark: {
-      [$bg10.variable]: "colors.whiteAlpha.300"
+      [$bg11.variable]: "colors.whiteAlpha.300"
     }
   },
   _disabled: {
@@ -8858,7 +9254,7 @@ var baseStyleStepper = defineStyle({
     cursor: "not-allowed"
   }
 });
-var baseStyle23 = definePartsStyle15((props) => {
+var baseStyle24 = definePartsStyle16((props) => {
   var _a6;
   return {
     root: baseStyleRoot2,
@@ -8878,7 +9274,7 @@ function getSize2(size2) {
   };
   const _fontSize = (_c3 = (_b5 = sizeStyle.field) == null ? void 0 : _b5.fontSize) != null ? _c3 : "md";
   const fontSize = typography_default.fontSizes[_fontSize];
-  return definePartsStyle15({
+  return definePartsStyle16({
     field: {
       ...sizeStyle.field,
       paddingInlineEnd: $inputPadding.reference,
@@ -8903,8 +9299,8 @@ var sizes16 = {
   md: getSize2("md"),
   lg: getSize2("lg")
 };
-var numberInputTheme = defineMultiStyleConfig15({
-  baseStyle: baseStyle23,
+var numberInputTheme = defineMultiStyleConfig16({
+  baseStyle: baseStyle24,
   sizes: sizes16,
   variants: inputTheme.variants,
   defaultProps: inputTheme.defaultProps
@@ -8912,7 +9308,7 @@ var numberInputTheme = defineMultiStyleConfig15({
 
 // ../../node_modules/@chakra-ui/theme/dist/chunk-QW3Z4V42.mjs
 var _a5;
-var baseStyle24 = defineStyle({
+var baseStyle25 = defineStyle({
   ...(_a5 = inputTheme.baseStyle) == null ? void 0 : _a5.field,
   textAlign: "center"
 });
@@ -8966,12 +9362,12 @@ var variants7 = {
   unstyled: (_b4 = (_a23 = inputTheme.variants) == null ? void 0 : _a23.unstyled.field) != null ? _b4 : {}
 };
 var pinInputTheme = defineStyleConfig({
-  baseStyle: baseStyle24,
+  baseStyle: baseStyle25,
   sizes: sizes17,
   variants: variants7,
   defaultProps: inputTheme.defaultProps
 });
-var { defineMultiStyleConfig: defineMultiStyleConfig16, definePartsStyle: definePartsStyle16 } = createMultiStyleConfigHelpers(popoverAnatomy.keys);
+var { defineMultiStyleConfig: defineMultiStyleConfig17, definePartsStyle: definePartsStyle17 } = createMultiStyleConfigHelpers(popoverAnatomy.keys);
 var $popperBg = cssVar$1("popper-bg");
 var $arrowBg2 = cssVar$1("popper-arrow-bg");
 var $arrowShadowColor = cssVar$1("popper-arrow-shadow-color");
@@ -9017,7 +9413,7 @@ var baseStyleCloseButton3 = defineStyle({
   insetEnd: 2,
   padding: 2
 });
-var baseStyle25 = definePartsStyle16({
+var baseStyle26 = definePartsStyle17({
   popper: baseStylePopper,
   content: baseStyleContent,
   header: baseStyleHeader2,
@@ -9025,21 +9421,21 @@ var baseStyle25 = definePartsStyle16({
   footer: baseStyleFooter2,
   closeButton: baseStyleCloseButton3
 });
-var popoverTheme = defineMultiStyleConfig16({
-  baseStyle: baseStyle25
+var popoverTheme = defineMultiStyleConfig17({
+  baseStyle: baseStyle26
 });
 
 // ../../node_modules/@chakra-ui/theme/dist/chunk-PQSF5PVS.mjs
-var { definePartsStyle: definePartsStyle17, defineMultiStyleConfig: defineMultiStyleConfig17 } = createMultiStyleConfigHelpers(drawerAnatomy.keys);
-var $bg11 = cssVar("drawer-bg");
+var { definePartsStyle: definePartsStyle18, defineMultiStyleConfig: defineMultiStyleConfig18 } = createMultiStyleConfigHelpers(drawerAnatomy.keys);
+var $bg12 = cssVar("drawer-bg");
 var $bs = cssVar("drawer-box-shadow");
 function getSize3(value) {
   if (value === "full") {
-    return definePartsStyle17({
+    return definePartsStyle18({
       dialog: { maxW: "100vw", h: "100vh" }
     });
   }
-  return definePartsStyle17({
+  return definePartsStyle18({
     dialog: { maxW: value }
   });
 }
@@ -9059,13 +9455,13 @@ var baseStyleDialog2 = defineStyle((props) => {
     zIndex: "modal",
     maxH: "100vh",
     color: "inherit",
-    [$bg11.variable]: "colors.white",
+    [$bg12.variable]: "colors.white",
     [$bs.variable]: "shadows.lg",
     _dark: {
-      [$bg11.variable]: "colors.gray.700",
+      [$bg12.variable]: "colors.gray.700",
       [$bs.variable]: "shadows.dark-lg"
     },
-    bg: $bg11.reference,
+    bg: $bg12.reference,
     boxShadow: $bs.reference
   };
 });
@@ -9090,7 +9486,7 @@ var baseStyleFooter3 = defineStyle({
   px: "6",
   py: "4"
 });
-var baseStyle26 = definePartsStyle17((props) => ({
+var baseStyle27 = definePartsStyle18((props) => ({
   overlay: baseStyleOverlay2,
   dialogContainer: baseStyleDialogContainer2,
   dialog: runIfFn(baseStyleDialog2, props),
@@ -9107,8 +9503,8 @@ var sizes18 = {
   xl: getSize3("4xl"),
   full: getSize3("full")
 };
-var drawerTheme = defineMultiStyleConfig17({
-  baseStyle: baseStyle26,
+var drawerTheme = defineMultiStyleConfig18({
+  baseStyle: baseStyle27,
   sizes: sizes18,
   defaultProps: {
     size: "xs"
@@ -9116,7 +9512,7 @@ var drawerTheme = defineMultiStyleConfig17({
 });
 
 // ../../node_modules/@chakra-ui/theme/dist/chunk-YZVOF4MP.mjs
-var { definePartsStyle: definePartsStyle18, defineMultiStyleConfig: defineMultiStyleConfig18 } = createMultiStyleConfigHelpers(editableAnatomy.keys);
+var { definePartsStyle: definePartsStyle19, defineMultiStyleConfig: defineMultiStyleConfig19 } = createMultiStyleConfigHelpers(editableAnatomy.keys);
 var baseStylePreview = defineStyle({
   borderRadius: "md",
   py: "1",
@@ -9141,17 +9537,17 @@ var baseStyleTextarea = defineStyle({
   _focusVisible: { boxShadow: "outline" },
   _placeholder: { opacity: 0.6 }
 });
-var baseStyle27 = definePartsStyle18({
+var baseStyle28 = definePartsStyle19({
   preview: baseStylePreview,
   input: baseStyleInput,
   textarea: baseStyleTextarea
 });
-var editableTheme = defineMultiStyleConfig18({
-  baseStyle: baseStyle27
+var editableTheme = defineMultiStyleConfig19({
+  baseStyle: baseStyle28
 });
 
 // ../../node_modules/@chakra-ui/theme/dist/chunk-RUW3STUO.mjs
-var { definePartsStyle: definePartsStyle19, defineMultiStyleConfig: defineMultiStyleConfig19 } = createMultiStyleConfigHelpers(formAnatomy.keys);
+var { definePartsStyle: definePartsStyle20, defineMultiStyleConfig: defineMultiStyleConfig20 } = createMultiStyleConfigHelpers(formAnatomy.keys);
 var $fg4 = cssVar("form-control-color");
 var baseStyleRequiredIndicator = defineStyle({
   marginStart: "1",
@@ -9171,7 +9567,7 @@ var baseStyleHelperText = defineStyle({
   lineHeight: "normal",
   fontSize: "sm"
 });
-var baseStyle28 = definePartsStyle19({
+var baseStyle29 = definePartsStyle20({
   container: {
     width: "100%",
     position: "relative"
@@ -9179,12 +9575,12 @@ var baseStyle28 = definePartsStyle19({
   requiredIndicator: baseStyleRequiredIndicator,
   helperText: baseStyleHelperText
 });
-var formTheme = defineMultiStyleConfig19({
-  baseStyle: baseStyle28
+var formTheme = defineMultiStyleConfig20({
+  baseStyle: baseStyle29
 });
 
 // ../../node_modules/@chakra-ui/theme/dist/chunk-D55YRTLZ.mjs
-var { definePartsStyle: definePartsStyle20, defineMultiStyleConfig: defineMultiStyleConfig20 } = createMultiStyleConfigHelpers(formErrorAnatomy.keys);
+var { definePartsStyle: definePartsStyle21, defineMultiStyleConfig: defineMultiStyleConfig21 } = createMultiStyleConfigHelpers(formErrorAnatomy.keys);
 var $fg5 = cssVar("form-error-color");
 var baseStyleText = defineStyle({
   [$fg5.variable]: `colors.red.500`,
@@ -9204,16 +9600,16 @@ var baseStyleIcon5 = defineStyle({
   },
   color: $fg5.reference
 });
-var baseStyle29 = definePartsStyle20({
+var baseStyle30 = definePartsStyle21({
   text: baseStyleText,
   icon: baseStyleIcon5
 });
-var formErrorTheme = defineMultiStyleConfig20({
-  baseStyle: baseStyle29
+var formErrorTheme = defineMultiStyleConfig21({
+  baseStyle: baseStyle30
 });
 
 // ../../node_modules/@chakra-ui/theme/dist/chunk-OYCZTG3L.mjs
-var baseStyle30 = defineStyle({
+var baseStyle31 = defineStyle({
   fontSize: "md",
   marginEnd: "3",
   mb: "2",
@@ -9226,11 +9622,11 @@ var baseStyle30 = defineStyle({
   }
 });
 var formLabelTheme = defineStyleConfig({
-  baseStyle: baseStyle30
+  baseStyle: baseStyle31
 });
 
 // ../../node_modules/@chakra-ui/theme/dist/chunk-X4O3JXYB.mjs
-var baseStyle31 = defineStyle({
+var baseStyle32 = defineStyle({
   fontFamily: "heading",
   fontWeight: "bold"
 });
@@ -9269,37 +9665,41 @@ var sizes19 = {
   })
 };
 var headingTheme = defineStyleConfig({
-  baseStyle: baseStyle31,
+  baseStyle: baseStyle32,
   sizes: sizes19,
   defaultProps: {
     size: "xl"
   }
 });
 
-// ../../node_modules/@chakra-ui/theme/dist/chunk-GLS227WS.mjs
-var { defineMultiStyleConfig: defineMultiStyleConfig21, definePartsStyle: definePartsStyle21 } = createMultiStyleConfigHelpers(breadcrumbAnatomy.keys);
+// ../../node_modules/@chakra-ui/theme/dist/chunk-OZJFUHHJ.mjs
+var { defineMultiStyleConfig: defineMultiStyleConfig22, definePartsStyle: definePartsStyle22 } = createMultiStyleConfigHelpers(breadcrumbAnatomy.keys);
+var $decor = cssVar("breadcrumb-link-decor");
 var baseStyleLink = defineStyle({
   transitionProperty: "common",
   transitionDuration: "fast",
   transitionTimingFunction: "ease-out",
-  cursor: "pointer",
-  textDecoration: "none",
   outline: "none",
   color: "inherit",
-  _hover: {
-    textDecoration: "underline"
-  },
-  _focusVisible: {
-    boxShadow: "outline"
+  textDecoration: $decor.reference,
+  [$decor.variable]: "none",
+  "&:not([aria-current=page])": {
+    cursor: "pointer",
+    _hover: {
+      [$decor.variable]: "underline"
+    },
+    _focusVisible: {
+      boxShadow: "outline"
+    }
   }
 });
-var baseStyle32 = definePartsStyle21({
+var baseStyle33 = definePartsStyle22({
   link: baseStyleLink
 });
-var breadcrumbTheme = defineMultiStyleConfig21({
-  baseStyle: baseStyle32
+var breadcrumbTheme = defineMultiStyleConfig22({
+  baseStyle: baseStyle33
 });
-var baseStyle33 = defineStyle({
+var baseStyle34 = defineStyle({
   lineHeight: "1.2",
   borderRadius: "md",
   fontWeight: "semibold",
@@ -9464,7 +9864,7 @@ var sizes20 = {
   })
 };
 var buttonTheme = defineStyleConfig({
-  baseStyle: baseStyle33,
+  baseStyle: baseStyle34,
   variants: variants8,
   sizes: sizes20,
   defaultProps: {
@@ -9475,18 +9875,18 @@ var buttonTheme = defineStyleConfig({
 });
 
 // ../../node_modules/@chakra-ui/theme/dist/chunk-PZHBQTKY.mjs
-var { definePartsStyle: definePartsStyle22, defineMultiStyleConfig: defineMultiStyleConfig22 } = createMultiStyleConfigHelpers(cardAnatomy.keys);
-var $bg12 = cssVar("card-bg");
+var { definePartsStyle: definePartsStyle23, defineMultiStyleConfig: defineMultiStyleConfig23 } = createMultiStyleConfigHelpers(cardAnatomy.keys);
+var $bg13 = cssVar("card-bg");
 var $padding = cssVar("card-padding");
-var $shadow3 = cssVar("card-shadow");
+var $shadow4 = cssVar("card-shadow");
 var $radius = cssVar("card-radius");
 var $border3 = cssVar("card-border-width", "0");
 var $borderColor = cssVar("card-border-color");
-var baseStyle34 = definePartsStyle22({
+var baseStyle35 = definePartsStyle23({
   container: {
-    [$bg12.variable]: "colors.chakra-body-bg",
-    backgroundColor: $bg12.reference,
-    boxShadow: $shadow3.reference,
+    [$bg13.variable]: "colors.chakra-body-bg",
+    backgroundColor: $bg13.reference,
+    boxShadow: $shadow4.reference,
     borderRadius: $radius.reference,
     color: "chakra-body-text",
     borderWidth: $border3.reference,
@@ -9504,19 +9904,19 @@ var baseStyle34 = definePartsStyle22({
   }
 });
 var sizes21 = {
-  sm: definePartsStyle22({
+  sm: definePartsStyle23({
     container: {
       [$radius.variable]: "radii.base",
       [$padding.variable]: "space.3"
     }
   }),
-  md: definePartsStyle22({
+  md: definePartsStyle23({
     container: {
       [$radius.variable]: "radii.md",
       [$padding.variable]: "space.5"
     }
   }),
-  lg: definePartsStyle22({
+  lg: definePartsStyle23({
     container: {
       [$radius.variable]: "radii.xl",
       [$padding.variable]: "space.7"
@@ -9524,23 +9924,23 @@ var sizes21 = {
   })
 };
 var variants9 = {
-  elevated: definePartsStyle22({
+  elevated: definePartsStyle23({
     container: {
-      [$shadow3.variable]: "shadows.base",
+      [$shadow4.variable]: "shadows.base",
       _dark: {
-        [$bg12.variable]: "colors.gray.700"
+        [$bg13.variable]: "colors.gray.700"
       }
     }
   }),
-  outline: definePartsStyle22({
+  outline: definePartsStyle23({
     container: {
       [$border3.variable]: "1px",
       [$borderColor.variable]: "colors.chakra-border-color"
     }
   }),
-  filled: definePartsStyle22({
+  filled: definePartsStyle23({
     container: {
-      [$bg12.variable]: "colors.chakra-subtle-bg"
+      [$bg13.variable]: "colors.chakra-subtle-bg"
     }
   }),
   unstyled: {
@@ -9555,8 +9955,8 @@ var variants9 = {
     }
   }
 };
-var cardTheme = defineMultiStyleConfig22({
-  baseStyle: baseStyle34,
+var cardTheme = defineMultiStyleConfig23({
+  baseStyle: baseStyle35,
   variants: variants9,
   sizes: sizes21,
   defaultProps: {
@@ -9564,11 +9964,11 @@ var cardTheme = defineMultiStyleConfig22({
     size: "md"
   }
 });
-var $size3 = cssVar$1("close-button-size");
-var $bg13 = cssVar$1("close-button-bg");
-var baseStyle35 = defineStyle({
-  w: [$size3.reference],
-  h: [$size3.reference],
+var $size4 = cssVar$1("close-button-size");
+var $bg14 = cssVar$1("close-button-bg");
+var baseStyle36 = defineStyle({
+  w: [$size4.reference],
+  h: [$size4.reference],
   borderRadius: "md",
   transitionProperty: "common",
   transitionDuration: "normal",
@@ -9578,38 +9978,38 @@ var baseStyle35 = defineStyle({
     boxShadow: "none"
   },
   _hover: {
-    [$bg13.variable]: "colors.blackAlpha.100",
+    [$bg14.variable]: "colors.blackAlpha.100",
     _dark: {
-      [$bg13.variable]: "colors.whiteAlpha.100"
+      [$bg14.variable]: "colors.whiteAlpha.100"
     }
   },
   _active: {
-    [$bg13.variable]: "colors.blackAlpha.200",
+    [$bg14.variable]: "colors.blackAlpha.200",
     _dark: {
-      [$bg13.variable]: "colors.whiteAlpha.200"
+      [$bg14.variable]: "colors.whiteAlpha.200"
     }
   },
   _focusVisible: {
     boxShadow: "outline"
   },
-  bg: $bg13.reference
+  bg: $bg14.reference
 });
 var sizes22 = {
   lg: defineStyle({
-    [$size3.variable]: "sizes.10",
+    [$size4.variable]: "sizes.10",
     fontSize: "md"
   }),
   md: defineStyle({
-    [$size3.variable]: "sizes.8",
+    [$size4.variable]: "sizes.8",
     fontSize: "xs"
   }),
   sm: defineStyle({
-    [$size3.variable]: "sizes.6",
+    [$size4.variable]: "sizes.6",
     fontSize: "2xs"
   })
 };
 var closeButtonTheme = defineStyleConfig({
-  baseStyle: baseStyle35,
+  baseStyle: baseStyle36,
   sizes: sizes22,
   defaultProps: {
     size: "md"
@@ -9618,7 +10018,7 @@ var closeButtonTheme = defineStyleConfig({
 
 // ../../node_modules/@chakra-ui/theme/dist/chunk-CAKKPKRW.mjs
 var { variants: variants10, defaultProps } = badgeTheme;
-var baseStyle36 = defineStyle({
+var baseStyle37 = defineStyle({
   fontFamily: "mono",
   fontSize: "sm",
   px: "0.2em",
@@ -9628,24 +10028,24 @@ var baseStyle36 = defineStyle({
   boxShadow: vars.shadow.reference
 });
 var codeTheme = defineStyleConfig({
-  baseStyle: baseStyle36,
+  baseStyle: baseStyle37,
   variants: variants10,
   defaultProps
 });
 
 // ../../node_modules/@chakra-ui/theme/dist/chunk-NDGGJV23.mjs
-var baseStyle37 = defineStyle({
+var baseStyle38 = defineStyle({
   w: "100%",
   mx: "auto",
   maxW: "prose",
   px: "4"
 });
 var containerTheme = defineStyleConfig({
-  baseStyle: baseStyle37
+  baseStyle: baseStyle38
 });
 
 // ../../node_modules/@chakra-ui/theme/dist/chunk-5Z4IVOU3.mjs
-var baseStyle38 = defineStyle({
+var baseStyle39 = defineStyle({
   opacity: 0.6,
   borderColor: "inherit"
 });
@@ -9660,7 +10060,7 @@ var variants11 = {
   dashed: variantDashed
 };
 var dividerTheme = defineStyleConfig({
-  baseStyle: baseStyle38,
+  baseStyle: baseStyle39,
   variants: variants11,
   defaultProps: {
     variant: "solid"
@@ -9668,7 +10068,7 @@ var dividerTheme = defineStyleConfig({
 });
 
 // ../../node_modules/@chakra-ui/theme/dist/chunk-T276HDLM.mjs
-var { definePartsStyle: definePartsStyle23, defineMultiStyleConfig: defineMultiStyleConfig23 } = createMultiStyleConfigHelpers(accordionAnatomy.keys);
+var { definePartsStyle: definePartsStyle24, defineMultiStyleConfig: defineMultiStyleConfig24 } = createMultiStyleConfigHelpers(accordionAnatomy.keys);
 var baseStyleContainer4 = defineStyle({
   borderTopWidth: "1px",
   borderColor: "inherit",
@@ -9701,19 +10101,19 @@ var baseStylePanel = defineStyle({
 var baseStyleIcon6 = defineStyle({
   fontSize: "1.25em"
 });
-var baseStyle39 = definePartsStyle23({
+var baseStyle40 = definePartsStyle24({
   container: baseStyleContainer4,
   button: baseStyleButton2,
   panel: baseStylePanel,
   icon: baseStyleIcon6
 });
-var accordionTheme = defineMultiStyleConfig23({ baseStyle: baseStyle39 });
-var { definePartsStyle: definePartsStyle24, defineMultiStyleConfig: defineMultiStyleConfig24 } = createMultiStyleConfigHelpers(alertAnatomy.keys);
+var accordionTheme = defineMultiStyleConfig24({ baseStyle: baseStyle40 });
+var { definePartsStyle: definePartsStyle25, defineMultiStyleConfig: defineMultiStyleConfig25 } = createMultiStyleConfigHelpers(alertAnatomy.keys);
 var $fg6 = cssVar("alert-fg");
-var $bg14 = cssVar("alert-bg");
-var baseStyle40 = definePartsStyle24({
+var $bg15 = cssVar("alert-bg");
+var baseStyle41 = definePartsStyle25({
   container: {
-    bg: $bg14.reference,
+    bg: $bg15.reference,
     px: "4",
     py: "3"
   },
@@ -9748,30 +10148,30 @@ function getBg(props) {
     dark: darkBg
   };
 }
-var variantSubtle2 = definePartsStyle24((props) => {
+var variantSubtle2 = definePartsStyle25((props) => {
   const { colorScheme: c } = props;
   const bg = getBg(props);
   return {
     container: {
       [$fg6.variable]: `colors.${c}.500`,
-      [$bg14.variable]: bg.light,
+      [$bg15.variable]: bg.light,
       _dark: {
         [$fg6.variable]: `colors.${c}.200`,
-        [$bg14.variable]: bg.dark
+        [$bg15.variable]: bg.dark
       }
     }
   };
 });
-var variantLeftAccent = definePartsStyle24((props) => {
+var variantLeftAccent = definePartsStyle25((props) => {
   const { colorScheme: c } = props;
   const bg = getBg(props);
   return {
     container: {
       [$fg6.variable]: `colors.${c}.500`,
-      [$bg14.variable]: bg.light,
+      [$bg15.variable]: bg.light,
       _dark: {
         [$fg6.variable]: `colors.${c}.200`,
-        [$bg14.variable]: bg.dark
+        [$bg15.variable]: bg.dark
       },
       paddingStart: "3",
       borderStartWidth: "4px",
@@ -9779,16 +10179,16 @@ var variantLeftAccent = definePartsStyle24((props) => {
     }
   };
 });
-var variantTopAccent = definePartsStyle24((props) => {
+var variantTopAccent = definePartsStyle25((props) => {
   const { colorScheme: c } = props;
   const bg = getBg(props);
   return {
     container: {
       [$fg6.variable]: `colors.${c}.500`,
-      [$bg14.variable]: bg.light,
+      [$bg15.variable]: bg.light,
       _dark: {
         [$fg6.variable]: `colors.${c}.200`,
-        [$bg14.variable]: bg.dark
+        [$bg15.variable]: bg.dark
       },
       pt: "2",
       borderTopWidth: "4px",
@@ -9796,15 +10196,15 @@ var variantTopAccent = definePartsStyle24((props) => {
     }
   };
 });
-var variantSolid4 = definePartsStyle24((props) => {
+var variantSolid4 = definePartsStyle25((props) => {
   const { colorScheme: c } = props;
   return {
     container: {
       [$fg6.variable]: `colors.white`,
-      [$bg14.variable]: `colors.${c}.500`,
+      [$bg15.variable]: `colors.${c}.500`,
       _dark: {
         [$fg6.variable]: `colors.gray.900`,
-        [$bg14.variable]: `colors.${c}.200`
+        [$bg15.variable]: `colors.${c}.200`
       },
       color: $fg6.reference
     }
@@ -9816,17 +10216,17 @@ var variants12 = {
   "top-accent": variantTopAccent,
   solid: variantSolid4
 };
-var alertTheme = defineMultiStyleConfig24({
-  baseStyle: baseStyle40,
+var alertTheme = defineMultiStyleConfig25({
+  baseStyle: baseStyle41,
   variants: variants12,
   defaultProps: {
     variant: "subtle",
     colorScheme: "blue"
   }
 });
-var { definePartsStyle: definePartsStyle25, defineMultiStyleConfig: defineMultiStyleConfig25 } = createMultiStyleConfigHelpers(avatarAnatomy.keys);
+var { definePartsStyle: definePartsStyle26, defineMultiStyleConfig: defineMultiStyleConfig26 } = createMultiStyleConfigHelpers(avatarAnatomy.keys);
 var $border4 = cssVar("avatar-border-color");
-var $bg15 = cssVar("avatar-bg");
+var $bg16 = cssVar("avatar-bg");
 var baseStyleBadge = defineStyle({
   borderRadius: "full",
   border: "0.2em solid",
@@ -9837,11 +10237,11 @@ var baseStyleBadge = defineStyle({
   borderColor: $border4.reference
 });
 var baseStyleExcessLabel = defineStyle({
-  [$bg15.variable]: "colors.gray.200",
+  [$bg16.variable]: "colors.gray.200",
   _dark: {
-    [$bg15.variable]: "colors.whiteAlpha.400"
+    [$bg16.variable]: "colors.whiteAlpha.400"
   },
-  bgColor: $bg15.reference
+  bgColor: $bg16.reference
 });
 var $avatarBg = cssVar("avatar-background");
 var baseStyleContainer5 = defineStyle((props) => {
@@ -9865,14 +10265,14 @@ var baseStyleContainer5 = defineStyle((props) => {
     verticalAlign: "top"
   };
 });
-var baseStyle41 = definePartsStyle25((props) => ({
+var baseStyle42 = definePartsStyle26((props) => ({
   badge: runIfFn(baseStyleBadge, props),
   excessLabel: runIfFn(baseStyleExcessLabel, props),
   container: runIfFn(baseStyleContainer5, props)
 }));
 function getSize4(size2) {
   const themeSize = size2 !== "100%" ? sizes_default[size2] : void 0;
-  return definePartsStyle25({
+  return definePartsStyle26({
     container: {
       width: size2,
       height: size2,
@@ -9898,13 +10298,13 @@ var sizes23 = {
   "2xl": getSize4(32),
   full: getSize4("100%")
 };
-var avatarTheme = defineMultiStyleConfig25({
-  baseStyle: baseStyle41,
+var avatarTheme = defineMultiStyleConfig26({
+  baseStyle: baseStyle42,
   sizes: sizes23,
   defaultProps: { size: "md" }
 });
 
-// ../../node_modules/@chakra-ui/theme/dist/chunk-EO2YJNI2.mjs
+// ../../node_modules/@chakra-ui/theme/dist/chunk-64X4WVHB.mjs
 var components = {
   Accordion: accordionTheme,
   Alert: alertTheme,
@@ -9946,16 +10346,19 @@ var components = {
   Tag: tagTheme,
   Textarea: textareaTheme,
   Tooltip: tooltipTheme,
-  Card: cardTheme
+  Card: cardTheme,
+  Stepper: stepperTheme
 };
 
-// ../../node_modules/@chakra-ui/theme/dist/chunk-HZX2OI7F.mjs
+// ../../node_modules/@chakra-ui/theme/dist/chunk-BF6JLLXF.mjs
 var semanticTokens = {
   colors: {
     "chakra-body-text": { _light: "gray.800", _dark: "whiteAlpha.900" },
     "chakra-body-bg": { _light: "white", _dark: "gray.800" },
     "chakra-border-color": { _light: "gray.200", _dark: "whiteAlpha.300" },
+    "chakra-inverse-text": { _light: "white", _dark: "gray.800" },
     "chakra-subtle-bg": { _light: "gray.100", _dark: "gray.700" },
+    "chakra-subtle-text": { _light: "gray.600", _dark: "gray.400" },
     "chakra-placeholder-color": { _light: "gray.500", _dark: "whiteAlpha.400" }
   }
 };
@@ -10040,14 +10443,14 @@ var foundations_exports = {};
 __export(foundations_exports, {
   borders: () => borders2,
   breakpoints: () => breakpoints2,
-  colors: () => colors2,
+  colors: () => colors,
   config: () => config2,
   fontSizes: () => fontSizes,
   fontWeights: () => fontWeights,
   fonts: () => fonts,
   lineHeights: () => lineHeights,
   radii: () => radii2,
-  shadows: () => shadows2,
+  shadows: () => shadows,
   sizes: () => sizes24,
   space: () => space2,
   spacing: () => spacing2,
@@ -10070,11 +10473,6 @@ var breakpoints2 = {
   xl: tokens10__default.size.breakpoint.lg,
   "2xl": tokens10__default.size.breakpoint.lg
 };
-var colors2 = {
-  ...tokens10__default.color.alias,
-  ...tokens10__default.color.palette,
-  linjetag: tokens10__default.color.linjetag
-};
 
 // src/theme/foundations/config.ts
 var config2 = {
@@ -10133,12 +10531,6 @@ var radii2 = {
   "2xl": tokens10__default.size["border-radius"]["2xl"],
   round: "50%"
 };
-var shadows2 = {
-  none: "none",
-  sm: tokens10__default.depth.shadow.sm.value,
-  md: tokens10__default.depth.shadow.md.value,
-  lg: tokens10__default.depth.shadow.lg.value
-};
 var spacing2 = Object.entries(tokens10__default.size.spacing).reduce(
   (tokens14, [key, token]) => ({
     ...tokens14,
@@ -10253,42 +10645,6 @@ var zIndices2 = {
   tooltip: tokens10__default.depth["z-index"].tooltip
 };
 
-// src/theme/utils/box-shadow-utils.ts
-var getBoxShadowString = (args) => {
-  var _a6;
-  if (Array.isArray(args)) {
-    return args.map((arg) => getBoxShadowString(arg)).join(", ");
-  }
-  const { baseShadow, borderColor, borderWidth = 1, isInset = true } = args;
-  const allShadows = [];
-  if (borderColor) {
-    let color2 = borderColor;
-    if (borderColor in colors2) {
-      color2 = colors2[borderColor];
-    } else {
-      const [subgroup, value] = borderColor.split(".");
-      const subgroupValue = (_a6 = colors2[subgroup]) == null ? void 0 : _a6[value];
-      if (subgroupValue) {
-        color2 = subgroupValue;
-      }
-    }
-    allShadows.push(
-      `${isInset ? "inset " : ""}0 0 0 ${borderWidth}px ${color2}`
-    );
-  }
-  if (baseShadow) {
-    allShadows.push(shadows2[baseShadow]);
-  }
-  return allShadows.join(", ");
-};
-
-// src/theme/utils/focus-utils.ts
-var focusVisible = ({ notFocus, focus }) => ({
-  _focus: focus,
-  _focusVisible: focus,
-  "&[data-focus]:not([data-focus-visible])": notFocus
-});
-
 // src/theme/components/accordion.ts
 var helpers = createMultiStyleConfigHelpers(accordionAnatomy.keys);
 var config3 = helpers.defineMultiStyleConfig({
@@ -10349,7 +10705,7 @@ var config3 = helpers.defineMultiStyleConfig({
     outline: {
       container: {
         boxShadow: getBoxShadowString({
-          borderColor: colors2.blackAlpha["400"]
+          borderColor: colors.blackAlpha["400"]
         })
       },
       button: {
@@ -10599,7 +10955,7 @@ var config6 = defineStyleConfig$1({
       color: "white",
       ...focusVisible({
         focus: {
-          boxShadow: `inset 0 0 0 4px ${colors2.darkTeal}, inset 0 0 0 6px currentColor`
+          boxShadow: `inset 0 0 0 4px ${colors.darkTeal}, inset 0 0 0 6px currentColor`
         },
         notFocus: { boxShadow: "none" }
       }),
@@ -10615,7 +10971,7 @@ var config6 = defineStyleConfig$1({
       color: "white",
       ...focusVisible({
         focus: {
-          boxShadow: `inset 0 0 0 4px ${colors2.primaryGreen}, inset 0 0 0 4px ${colors2.primaryGreen}, inset 0 0 0 6px currentColor`
+          boxShadow: `inset 0 0 0 4px ${colors.primaryGreen}, inset 0 0 0 4px ${colors.primaryGreen}, inset 0 0 0 6px currentColor`
         },
         notFocus: { boxShadow: "none" }
       }),
@@ -10631,7 +10987,7 @@ var config6 = defineStyleConfig$1({
       color: "darkTeal",
       ...focusVisible({
         focus: {
-          boxShadow: `inset 0 0 0 4px ${colors2.coralGreen}, inset 0 0 0 4px ${colors2.coralGreen}, inset 0 0 0 6px currentColor`
+          boxShadow: `inset 0 0 0 4px ${colors.coralGreen}, inset 0 0 0 4px ${colors.coralGreen}, inset 0 0 0 6px currentColor`
         },
         notFocus: {
           boxShadow: "none"
@@ -10650,7 +11006,7 @@ var config6 = defineStyleConfig$1({
       fontWeight: "normal",
       ...focusVisible({
         focus: {
-          boxShadow: `inset 0 0 0 4px ${colors2.mint}, inset 0 0 0 4px ${colors2.mint}, inset 0 0 0 6px currentColor`
+          boxShadow: `inset 0 0 0 4px ${colors.mint}, inset 0 0 0 4px ${colors.mint}, inset 0 0 0 6px currentColor`
         },
         notFocus: { boxShadow: "none" }
       }),
@@ -10661,14 +11017,14 @@ var config6 = defineStyleConfig$1({
         backgroundColor: "lightGrey"
       }
     },
-    additional: ({ colorMode }) => ({
+    additional: (props) => ({
       backgroundColor: "transparent",
-      color: mode("darkGrey", "white")({ colorMode }),
+      color: mode("darkGrey", "white")(props),
       fontWeight: "normal",
       boxShadow: `inset 0 0 0 1px ${mode(
-        colors2.blackAlpha[400],
-        colors2.whiteAlpha[400]
-      )({ colorMode })}`,
+        colors.blackAlpha[400],
+        colors.whiteAlpha[400]
+      )(props)}`,
       ...focusVisible({
         focus: {
           boxShadow: getBoxShadowString({
@@ -10678,9 +11034,9 @@ var config6 = defineStyleConfig$1({
         },
         notFocus: {
           boxShadow: `inset 0 0 0 1px ${mode(
-            colors2.blackAlpha[400],
-            colors2.whiteAlpha[400]
-          )({ colorMode })}`
+            colors.blackAlpha[400],
+            colors.whiteAlpha[400]
+          )(props)}`
         }
       }),
       _hover: {
@@ -10688,20 +11044,20 @@ var config6 = defineStyleConfig$1({
       },
       _active: {
         boxShadow: `inset 0 0 0 1px ${mode(
-          colors2.blackAlpha[400],
-          colors2.whiteAlpha[300]
-        )({ colorMode })}`,
-        backgroundColor: mode("mint", colors2.whiteAlpha[300])({ colorMode })
+          colors.blackAlpha[400],
+          colors.whiteAlpha[300]
+        )(props)}`,
+        backgroundColor: mode("mint", "whiteAlpha.300")(props)
       }
     }),
-    ghost: () => ({
+    ghost: (props) => ({
       backgroundColor: "transparent",
-      color: "darkGrey",
+      color: mode("darkGrey", "white")(props),
       fontWeight: "normal",
       ...focusVisible({
         focus: {
           boxShadow: getBoxShadowString({
-            borderColor: "greenHaze",
+            borderColor: mode("greenHaze", "azure")(props),
             borderWidth: 2
           })
         },
@@ -10710,13 +11066,13 @@ var config6 = defineStyleConfig$1({
         }
       }),
       _hover: {
-        backgroundColor: "seaMist",
+        backgroundColor: mode("seaMist", "pine")(props),
         _disabled: {
           color: "blackAlpha.300"
         }
       },
       _active: {
-        backgroundColor: "mint"
+        backgroundColor: mode("mint", "whiteAlpha.300")(props)
       }
     }),
     floating: {
@@ -10838,9 +11194,9 @@ function getColorSchemeBaseProps({ colorScheme }) {
       };
     default:
       return {
-        backgroundColor: ((_a6 = colors2[colorScheme]) == null ? void 0 : _a6[100]) ?? "platinum",
+        backgroundColor: ((_a6 = colors[colorScheme]) == null ? void 0 : _a6[100]) ?? "platinum",
         boxShadow: getBoxShadowString({
-          borderColor: ((_b5 = colors2[colorScheme]) == null ? void 0 : _b5[200]) ?? "silver"
+          borderColor: ((_b5 = colors[colorScheme]) == null ? void 0 : _b5[200]) ?? "silver"
         })
       };
   }
@@ -10865,10 +11221,10 @@ function getColorSchemeClickableProps({ colorScheme, size: size2 }) {
       };
     default:
       return {
-        backgroundColor: ((_a6 = colors2[colorScheme]) == null ? void 0 : _a6[100]) ?? "platinum",
+        backgroundColor: ((_a6 = colors[colorScheme]) == null ? void 0 : _a6[100]) ?? "platinum",
         boxShadow: getBoxShadowString({
           baseShadow,
-          borderColor: ((_b5 = colors2[colorScheme]) == null ? void 0 : _b5[200]) ?? "silver"
+          borderColor: ((_b5 = colors[colorScheme]) == null ? void 0 : _b5[200]) ?? "silver"
         })
       };
   }
@@ -10881,22 +11237,22 @@ function getColorSchemeHoverProps({ colorScheme, size: size2 }) {
       return {
         boxShadow: getBoxShadowString({
           baseShadow,
-          borderColor: colors2.steel
+          borderColor: colors.steel
         })
       };
     case "grey":
       return {
         boxShadow: getBoxShadowString({
           baseShadow,
-          borderColor: colors2.osloGrey
+          borderColor: colors.osloGrey
         })
       };
     default:
       return {
-        backgroundColor: ((_a6 = colors2[colorScheme]) == null ? void 0 : _a6[200]) ?? "silver",
+        backgroundColor: ((_a6 = colors[colorScheme]) == null ? void 0 : _a6[200]) ?? "silver",
         boxShadow: getBoxShadowString({
           baseShadow,
-          borderColor: ((_b5 = colors2[colorScheme]) == null ? void 0 : _b5[400]) ?? colors2.silver
+          borderColor: ((_b5 = colors[colorScheme]) == null ? void 0 : _b5[400]) ?? colors.silver
         })
       };
   }
@@ -10910,7 +11266,7 @@ function getColorSchemeActiveProps({ colorScheme, size: size2 }) {
         backgroundColor: "mint",
         boxShadow: getBoxShadowString({
           baseShadow,
-          borderColor: colors2.silver
+          borderColor: colors.silver
         })
       };
     case "grey":
@@ -10918,15 +11274,15 @@ function getColorSchemeActiveProps({ colorScheme, size: size2 }) {
         backgroundColor: "white",
         boxShadow: getBoxShadowString({
           baseShadow,
-          borderColor: colors2.steel
+          borderColor: colors.steel
         })
       };
     default:
       return {
-        backgroundColor: ((_a6 = colors2[colorScheme]) == null ? void 0 : _a6[50]) ?? "lightGrey",
+        backgroundColor: ((_a6 = colors[colorScheme]) == null ? void 0 : _a6[50]) ?? "lightGrey",
         boxShadow: getBoxShadowString({
           baseShadow,
-          borderColor: ((_b5 = colors2[colorScheme]) == null ? void 0 : _b5[100]) ?? colors2.silver
+          borderColor: ((_b5 = colors[colorScheme]) == null ? void 0 : _b5[100]) ?? colors.silver
         })
       };
   }
@@ -11230,11 +11586,11 @@ var config10 = helpers5.defineMultiStyleConfig({
   }
 });
 var choice_chip_default = config10;
-var $size4 = cssVar$1("close-button-size");
+var $size5 = cssVar$1("close-button-size");
 var config11 = defineStyleConfig$1({
   baseStyle: {
-    w: [$size4.reference],
-    h: [$size4.reference],
+    w: [$size5.reference],
+    h: [$size5.reference],
     transitionProperty: "common",
     transitionDuration: "normal",
     borderRadius: "xs",
@@ -11262,15 +11618,15 @@ var config11 = defineStyleConfig$1({
   },
   sizes: {
     lg: {
-      [$size4.variable]: "40px",
+      [$size5.variable]: "40px",
       fontSize: "16px"
     },
     md: {
-      [$size4.variable]: "32px",
+      [$size5.variable]: "32px",
       fontSize: "12px"
     },
     sm: {
-      [$size4.variable]: "24px",
+      [$size5.variable]: "24px",
       fontSize: "10px"
     }
   },
@@ -11294,16 +11650,22 @@ var code_default = config12;
 var parts4 = anatomy$1("datepicker").parts(
   "wrapper",
   "calendarTriggerButton",
+  "arrow",
+  "calendar",
+  "weekdays",
+  "weekend",
   "dateCell",
-  "inputLabel"
+  "inputLabel",
+  "dateTimeSegment"
 );
+var $arrowBackground = cssVar$1("popper-arrow-bg");
 var helpers6 = createMultiStyleConfigHelpers$1(parts4.keys);
 var config13 = helpers6.defineMultiStyleConfig({
-  baseStyle: {
+  baseStyle: (props) => ({
     wrapper: {
-      backgroundColor: "white",
+      backgroundColor: mode("white", "night")(props),
       boxShadow: getBoxShadowString({
-        borderColor: colors2.blackAlpha["400"]
+        borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props)
       }),
       transitionProperty: "box-shadow",
       transitionDuration: "fast",
@@ -11313,14 +11675,14 @@ var config13 = helpers6.defineMultiStyleConfig({
       alignItems: "center",
       _hover: {
         boxShadow: getBoxShadowString({
-          borderColor: "darkGrey",
+          borderColor: mode("darkGrey", "white")(props),
           borderWidth: 2
         }),
         zIndex: zIndices2.docked
       },
       _focusWithin: {
         boxShadow: getBoxShadowString({
-          borderColor: "greenHaze",
+          borderColor: mode("greenHaze", "azure")(props),
           borderWidth: 2
         })
       },
@@ -11333,12 +11695,12 @@ var config13 = helpers6.defineMultiStyleConfig({
       _disabled: {
         pointerEvents: "none",
         boxShadow: getBoxShadowString({
-          borderColor: "osloGrey",
+          borderColor: mode("osloGrey", "whiteAlpha.400")(props),
           borderWidth: 1
         }),
         _focus: {
           boxShadow: getBoxShadowString({
-            borderColor: "osloGrey",
+            borderColor: mode("osloGrey", "whiteAlpha.400")(props),
             borderWidth: 1
           })
         }
@@ -11346,13 +11708,20 @@ var config13 = helpers6.defineMultiStyleConfig({
     },
     inputLabel: {
       fontSize: "mobile.xs",
-      color: "darkGrey",
+      color: mode("darkGrey", "white")(props),
       margin: 0
     },
+    dateTimeSegment: {
+      color: mode(
+        props.isPlaceholder ? "dimGrey" : props.isEditable ? "darkGrey" : "osloGrey",
+        props.isPlaceholder ? "whiteAlpha.400" : "white"
+      )(props)
+    },
     calendarTriggerButton: {
+      backgroundColor: mode("white", "night")(props),
       boxShadow: `${getBoxShadowString({
-        borderColor: colors2.blackAlpha["400"]
-      })}, inset 1px 0 0 1px white`,
+        borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props)
+      })}, inset 1px 0 0 1px ${mode("white", colors.night)(props)}`,
       // to make the shadow colors not multiply
       width: 8,
       display: "flex",
@@ -11366,24 +11735,24 @@ var config13 = helpers6.defineMultiStyleConfig({
       // To make the box-shadows overlap
       _hover: {
         boxShadow: `${getBoxShadowString({
-          borderColor: "darkGrey",
+          borderColor: mode("darkGrey", "white")(props),
           borderWidth: 2
-        })}, inset 2px 0 0 2px white`
+        })}, inset 2px 0 0 2px ${mode("white", colors.night)(props)}`
       },
       _active: {
-        backgroundColor: "mint"
+        backgroundColor: mode("mint", "azure")(props)
       },
       ...focusVisible({
         focus: {
           outline: "none",
           boxShadow: getBoxShadowString({
-            borderColor: "greenHaze",
+            borderColor: mode("greenHaze", "azure")(props),
             borderWidth: 2
           })
         },
         notFocus: {
           boxShadow: getBoxShadowString({
-            borderColor: "darkGrey",
+            borderColor: mode("darkGrey", "white")(props),
             borderWidth: 1
           })
         }
@@ -11395,9 +11764,22 @@ var config13 = helpers6.defineMultiStyleConfig({
         })
       }
     },
+    arrow: {
+      [$arrowBackground.variable]: mode("white", colors.night)(props)
+    },
+    calendar: {
+      backgroundColor: mode("white", "night")(props),
+      color: mode("darkGrey", "white")(props)
+    },
+    weekdays: {
+      color: mode("darkGrey", "white")(props)
+    },
+    weekend: {
+      color: mode("greenHaze", "azure")(props)
+    },
     dateCell: {
-      backgroundColor: "white",
-      color: "darkGrey",
+      backgroundColor: mode("white", "night")(props),
+      color: mode("darkGrey", "white")(props),
       borderRadius: "50%",
       position: "relative",
       transition: ".1s ease-in-out",
@@ -11407,14 +11789,14 @@ var config13 = helpers6.defineMultiStyleConfig({
       transitionProperty: "common",
       transitionSpeed: "fast",
       _hover: {
-        backgroundColor: "seaMist"
+        backgroundColor: mode("seaMist", "pine")(props)
       },
       ...focusVisible({
         focus: {
           outline: "none",
           boxShadow: getBoxShadowString({
             borderWidth: 2,
-            borderColor: "greenHaze"
+            borderColor: mode("greenHaze", "azure")(props)
           })
         },
         notFocus: {
@@ -11426,14 +11808,14 @@ var config13 = helpers6.defineMultiStyleConfig({
             })
           },
           _active: {
-            color: "darkGrey"
+            color: mode("darkGrey", "white")(props)
           }
         }
       }),
       _active: {
         backgroundColor: "seaMist",
         boxShadow: "none",
-        color: "darkGrey"
+        color: mode("darkGrey", "white")(props)
       },
       _disabled: {
         color: "osloGrey",
@@ -11441,7 +11823,7 @@ var config13 = helpers6.defineMultiStyleConfig({
         pointerEvents: "none"
       },
       _selected: {
-        backgroundColor: "darkTeal",
+        backgroundColor: mode("darkTeal", "pine")(props),
         color: "white",
         _active: {
           backgroundColor: "seaMist",
@@ -11452,7 +11834,7 @@ var config13 = helpers6.defineMultiStyleConfig({
       "&[data-today]": {
         boxShadow: getBoxShadowString({
           borderWidth: 1,
-          borderColor: "osloGrey"
+          borderColor: mode("osloGrey", "dimGrey")(props)
         })
       },
       "&[data-unavailable]": {
@@ -11460,7 +11842,7 @@ var config13 = helpers6.defineMultiStyleConfig({
         color: "osloGrey"
       }
     }
-  },
+  }),
   variants: {
     simple: {
       wrapper: {
@@ -13142,7 +13524,7 @@ var config32 = helpers22.defineMultiStyleConfig({
         boxShadow: mode(
           "none",
           getBoxShadowString({
-            borderColor: colors2.whiteAlpha[400]
+            borderColor: colors.whiteAlpha[400]
           })
         )({ colorMode }),
         ...focusVisible({
@@ -13171,7 +13553,7 @@ var config32 = helpers22.defineMultiStyleConfig({
             boxShadow: mode(
               "none",
               getBoxShadowString({
-                borderColor: colors2.whiteAlpha[400]
+                borderColor: colors.whiteAlpha[400]
               })
             )({ colorMode })
           }
@@ -13180,7 +13562,7 @@ var config32 = helpers22.defineMultiStyleConfig({
           backgroundColor: "steel",
           boxShadow: mode(
             "none",
-            getBoxShadowString({ borderColor: colors2.white })
+            getBoxShadowString({ borderColor: colors.white })
           )({ colorMode })
         },
         _checked: {
@@ -13210,7 +13592,7 @@ var config32 = helpers22.defineMultiStyleConfig({
             notFocus: {
               boxShadow: mode(
                 "none",
-                getBoxShadowString({ borderColor: colors2.white })
+                getBoxShadowString({ borderColor: colors.white })
               )({ colorMode })
             }
           }),
@@ -13218,7 +13600,7 @@ var config32 = helpers22.defineMultiStyleConfig({
             backgroundColor: mode("pine", "river")({ colorMode }),
             boxShadow: mode(
               "none",
-              getBoxShadowString({ borderColor: colors2.white })
+              getBoxShadowString({ borderColor: colors.white })
             )({ colorMode })
           }
         },
@@ -13226,13 +13608,13 @@ var config32 = helpers22.defineMultiStyleConfig({
           backgroundColor: mode("platinum", "dimGrey")({ colorMode }),
           boxShadow: mode(
             "none",
-            getBoxShadowString({ borderColor: colors2.whiteAlpha[400] })
+            getBoxShadowString({ borderColor: colors.whiteAlpha[400] })
           )({ colorMode }),
           _checked: {
             backgroundColor: mode("platinum", "dimGrey")({ colorMode }),
             boxShadow: mode(
               "none",
-              getBoxShadowString({ borderColor: colors2.whiteAlpha[400] })
+              getBoxShadowString({ borderColor: colors.whiteAlpha[400] })
             )({ colorMode })
           }
         }
@@ -13248,11 +13630,11 @@ var config32 = helpers22.defineMultiStyleConfig({
       track: {
         backgroundColor: "platinum",
         boxShadow: getBoxShadowString({
-          borderColor: colors2.blackAlpha["400"]
+          borderColor: colors.blackAlpha["400"]
         }),
         _focus: {
           backgroundColor: "platinum",
-          boxShadow: `0 0 0 2px ${colors2.greenHaze}`
+          boxShadow: `0 0 0 2px ${colors.greenHaze}`
         },
         _hover: {
           backgroundColor: "white"
@@ -13264,7 +13646,7 @@ var config32 = helpers22.defineMultiStyleConfig({
           },
           _focus: {
             backgroundColor: "white",
-            boxShadow: `0 0 0 4px ${colors2.greenHaze}, 0 0 0 2px ${colors2.white}`
+            boxShadow: `0 0 0 4px ${colors.greenHaze}, 0 0 0 2px ${colors.white}`
           }
         }
       },
@@ -13490,6 +13872,7 @@ var config34 = helpers24.defineMultiStyleConfig({
       transitionDuration: "normal",
       width: props.isFitted ? "fit-content" : "100%",
       height: "100%",
+      whiteSpace: "nowrap",
       ...getTabColorSchemeProps(props),
       _selected: {
         boxShadow: "md",
@@ -13855,7 +14238,7 @@ var ToastIcon = ({ variant }) => {
     Icon,
     {
       flexShrink: 0,
-      "aria-label": t2(texts20[variant]),
+      "aria-label": t2(texts21[variant]),
       marginRight: 1,
       marginY: 1.5,
       color: "darkGrey"
@@ -13872,7 +14255,7 @@ var getIcon3 = (variant) => {
       return ErrorOutline24Icon;
   }
 };
-var texts20 = createTexts({
+var texts21 = createTexts({
   info: {
     nb: "Informasjon",
     nn: "Informasjon",
@@ -13916,13 +14299,13 @@ var ClosableToast = ({
     {
       sx: styles2.dismissButton,
       variant: "ghost",
-      "aria-label": t2(texts21.dismiss),
+      "aria-label": t2(texts22.dismiss),
       icon: /* @__PURE__ */ React48__default.createElement(CloseFill18Icon, null),
       onClick: onClose
     }
   ));
 };
-var texts21 = createTexts({
+var texts22 = createTexts({
   dismiss: {
     nb: "Lukk",
     nn: "Lukk",
@@ -13975,4 +14358,4 @@ var getToastComponent = (opts) => {
   return ({ id }) => /* @__PURE__ */ React48__default.createElement(BaseToast, { id, variant: opts.variant }, opts.text);
 };
 
-export { Accordion, AttachedInputs, Badge, Button, ButtonGroup, Card, CardSelect, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, ColorInlineLoader, ColorSpinner, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerContent, Expandable, ExpandableAlert, ExpandableItem, FloatingActionButton, FormControl, FormErrorMessage, FormLabel3 as FormLabel, Heading, IconButton, InfoSelect, InfoTag, Input, InputLeftElement2 as InputLeftElement, InputRightElement2 as InputRightElement, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightSpinner, LineIcon, ListBox, ModalHeader, NativeSelect, PasswordInput, PhoneNumberInput, PlayPauseButton, PopoverWizardBody, ProgressBar, ProgressLoader, Radio, RadioGroup, SearchInput, SelectItemDescription, SelectItemLabel, SimpleDrawer, SimplePopover, Skeleton, SkeletonCircle, SkeletonText, SkipButton, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Table, Tabs, Text4 as Text, TextLink, Textarea, TimePicker, TravelTag, VyLogo, WizardPopover, createTexts, fontFaces, theme, useToast, useTranslation };
+export { Accordion, AttachedInputs, Badge, Button, ButtonGroup, Card, CardSelect, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, ColorInlineLoader, ColorSpinner, ContentLoader, Counter, DarkFullScreenLoader, DarkInlineLoader, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerContent, Expandable, ExpandableAlert, ExpandableItem, FloatingActionButton, FormControl, FormErrorMessage, FormLabel3 as FormLabel, Heading, IconButton, InfoSelect, InfoTag, Input, InputLeftElement2 as InputLeftElement, InputRightElement2 as InputRightElement, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightSpinner, LineIcon, ListBox, ModalHeader, NativeSelect, PasswordInput, PhoneNumberInput, PlayPauseButton, PopoverWizardBody, ProgressBar, ProgressLoader, Radio, RadioGroup, SearchInput, SelectItemDescription, SelectItemLabel, SimpleDrawer, SimplePopover, Skeleton, SkeletonCircle, SkeletonText, SkipButton, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Table, Tabs, Text4 as Text, TextLink, Textarea, TimePicker, TravelTag, VyLogo, WizardPopover, createTexts, fontFaces, theme, useToast, useTranslation };