@vygruppen/spor-react 7.2.2 → 8.0.0

package/dist/{chunk-PPXTF3R3.mjs → chunk-EGC6XZHT.mjs}

@@ -1,8 +1,8 @@
 import tokens10__default from '@vygruppen/spor-design-tokens';
 import * as tokens10 from '@vygruppen/spor-design-tokens';
 export { tokens10 as tokens };
-import { forwardRef, Divider as Divider$1, Stack as Stack$1, Accordion as Accordion$1, Skeleton as Skeleton$1, useButtonGroup, useStyleConfig, Box, Center, Flex, ButtonGroup as ButtonGroup$1, IconButton as IconButton$1, useMultiStyleConfig, Badge as Badge$1, Code as Code$1, Text, PopoverAnchor, FormLabel, useFormControlContext, PopoverContent, PopoverArrow, PopoverBody, FocusLock, Popover, InputGroup, PopoverTrigger, Portal, chakra, Checkbox as Checkbox$1, useCheckbox, FormControl as FormControl$1, InputLeftElement, Input as Input$1, InputRightElement, Select, useDisclosure, Button as Button$1, 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, useColorMode, SkeletonCircle as SkeletonCircle$1, SkeletonText as SkeletonText$1, useColorModeValue, Breadcrumb as Breadcrumb$1, BreadcrumbItem as BreadcrumbItem$1, BreadcrumbLink as BreadcrumbLink$1, Heading as Heading$1, CheckboxGroup as CheckboxGroup$1, List, ListItem, useFormControlProps, useFormControl, Drawer as Drawer$1, DrawerOverlay, DrawerCloseButton, DrawerBody, usePopoverContext, DarkMode, PopoverCloseButton, ChakraProvider, useToast as useToast$1, useInterval } from '@chakra-ui/react';
-export { AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Box, Center, Container, DarkMode, DrawerBody, DrawerCloseButton, DrawerFooter, DrawerOverlay, Fade, Flex, FormHelperText, Grid, GridItem, HStack, Image, Img, InputGroup, LightMode, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalOverlay, OrderedList, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, Portal, ScaleFade, SimpleGrid, Slide, SlideFade, Spacer, Tab, TabList, TabPanel, TabPanels, TableCaption, Tbody, Td, Tfoot, Th, Thead, Tr, UnorderedList, VStack, Wrap, WrapItem, defineStyleConfig, extendTheme, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToken } from '@chakra-ui/react';
+import { forwardRef, Divider as Divider$1, Stack as Stack$1, Accordion as Accordion$1, Skeleton as Skeleton$1, useButtonGroup, useStyleConfig, Box, Center, Flex, ButtonGroup as ButtonGroup$1, IconButton as IconButton$1, useMultiStyleConfig, Badge as Badge$1, Code as Code$1, Text, PopoverAnchor, FormLabel, useFormControlContext, PopoverContent, PopoverArrow, PopoverBody, FocusLock, Popover, InputGroup, PopoverTrigger, Portal, chakra, Checkbox as Checkbox$1, useCheckbox, FormControl as FormControl$1, InputLeftElement, Input as Input$1, InputRightElement, Select, useDisclosure, Button as Button$1, 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, useColorMode, SkeletonCircle as SkeletonCircle$1, SkeletonText as SkeletonText$1, useColorModeValue, Breadcrumb as Breadcrumb$1, BreadcrumbItem as BreadcrumbItem$1, BreadcrumbLink as BreadcrumbLink$1, Heading as Heading$1, CheckboxGroup as CheckboxGroup$1, List, ListItem, useFormControlProps, useFormControl, Drawer as Drawer$1, DrawerOverlay, DrawerCloseButton, DrawerBody, DarkMode, PopoverCloseButton, usePopoverContext, ChakraProvider, useToast as useToast$1, useInterval } from '@chakra-ui/react';
+export { AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Box, Center, Container, DarkMode, DrawerBody, DrawerCloseButton, DrawerFooter, DrawerOverlay, Fade, Flex, FormHelperText, Grid, GridItem, HStack, Image, Img, InputGroup, LightMode, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalOverlay, OrderedList, Portal, ScaleFade, SimpleGrid, Slide, SlideFade, Spacer, Tab, TabList, TabPanel, TabPanels, TableCaption, Tbody, Td, Tfoot, Th, Thead, Tr, UnorderedList, VStack, Wrap, WrapItem, defineStyleConfig, extendTheme, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToken } from '@chakra-ui/react';
 import * as React69 from 'react';
 import React69__default, { createContext, useEffect, forwardRef as forwardRef$1, useRef, useState, useId, Suspense, useContext, useCallback, useMemo, useLayoutEffect } from 'react';
 import { CloseFill30Icon, CloseFill24Icon, CloseFill18Icon, CalendarOutline24Icon, CloseOutline24Icon, SearchOutline24Icon, InformationFill24Icon, InformationFill18Icon, WarningFill24Icon, WarningFill18Icon, ErrorFill24Icon, ErrorFill18Icon, LinkOutOutline24Icon, DropdownRightFill18Icon, DropdownLeftFill18Icon, DropdownDownFill18Icon, DropdownDownFill24Icon, DropdownUpFill24Icon, ArrowRightFill18Icon, ArrowLeftFill24Icon, ArrowLeftOutline24Icon, ArrowRightOutline24Icon, ErrorOutline24Icon, AltTransportOutline24Icon, WarningOutline24Icon, SuccessOutline24Icon, InformationOutline24Icon, TrainFill18Icon, TrainFill24Icon, TrainFill30Icon, ExpressBusFill18Icon, ExpressBusFill24Icon, ExpressBusFill30Icon, BusFill18Icon, BusFill24Icon, BusFill30Icon, FerryFill18Icon, FerryFill24Icon, FerryFill30Icon, SubwayFill18Icon, SubwayFill24Icon, SubwayFill30Icon, TramFill18Icon, TramFill24Icon, TramFill30Icon, AltTransportFill18Icon, AltTransportFill24Icon, AltTransportFill30Icon, WalkFill18Icon, WalkFill24Icon, WalkFill30Icon } from '@vygruppen/spor-icon-react';
@@ -900,8 +900,8 @@ function useTranslation() {
   };
   return { t: t2, language };
 }
-function createTexts(texts25) {
-  return texts25;
+function createTexts(texts26) {
+  return texts26;
 }
 var hydrating = true;
 function useHydrated() {
@@ -2100,7 +2100,8 @@ var DatePicker = forwardRef$1(
           ...dialogProps,
           isOpen: state2.isOpen,
           onOpen: state2.open,
-          onClose: state2.close
+          onClose: state2.close,
+          flip: false
         },
         /* @__PURE__ */ React69__default.createElement(InputGroup, { ...groupProps, display: "inline-flex" }, /* @__PURE__ */ React69__default.createElement(PopoverAnchor, null, /* @__PURE__ */ React69__default.createElement(
           StyledField,
@@ -2596,7 +2597,14 @@ var CheckboxGroup = ({
 // ../../node_modules/@chakra-ui/utils/dist/chunk-O3SWHQEE.mjs
 var dataAttr = (condition) => condition ? "" : void 0;
 var ChoiceChip = forwardRef((props, ref) => {
-  const { children, icon, size: size2 = "md", variant = "choice" } = props;
+  const {
+    children,
+    icon,
+    isDisabled,
+    size: size2 = "md",
+    chipType = "choice",
+    variant = "base"
+  } = props;
   const {
     state: state2,
     getInputProps,
@@ -2606,6 +2614,7 @@ var ChoiceChip = forwardRef((props, ref) => {
   } = useCheckbox(props);
   const styles3 = useMultiStyleConfig("ChoiceChip", {
     size: size2,
+    chipType,
     variant,
     icon,
     hasLabel: Boolean(children)
@@ -2618,7 +2627,7 @@ var ChoiceChip = forwardRef((props, ref) => {
       ...getRootProps(),
       "aria-label": String(children)
     },
-    /* @__PURE__ */ React69__default.createElement(chakra.input, { ...getInputProps({}, ref), id }),
+    /* @__PURE__ */ React69__default.createElement(chakra.input, { ...getInputProps({}, ref), id, disabled: isDisabled }),
     /* @__PURE__ */ React69__default.createElement(
       chakra.div,
       {
@@ -2631,8 +2640,8 @@ var ChoiceChip = forwardRef((props, ref) => {
         "data-disabled": dataAttr(state2.isDisabled)
       },
       icon && /* @__PURE__ */ React69__default.createElement(chakra.span, { __css: styles3.icon }, state2.isChecked ? icon.checked : icon.default),
-      /* @__PURE__ */ React69__default.createElement(chakra.span, { __css: styles3.label, ...getCheckboxProps() }, variant !== "icon" && children),
-      variant === "filter" && state2.isChecked && /* @__PURE__ */ React69__default.createElement(CloseOutline24Icon, { marginLeft: 1.5 })
+      /* @__PURE__ */ React69__default.createElement(chakra.span, { __css: styles3.label, ...getCheckboxProps() }, chipType !== "icon" && children),
+      chipType === "filter" && state2.isChecked && /* @__PURE__ */ React69__default.createElement(CloseOutline24Icon, { marginLeft: 1.5 })
     )
   );
 });
@@ -3420,7 +3429,7 @@ var texts14 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-K45HQCJC.mjs'));
+var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-NCM6JIBM.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React69__default.createElement(Radio$1, { ...props, ref });
 });
@@ -4086,58 +4095,97 @@ var SimpleDrawer = ({
 }) => {
   return /* @__PURE__ */ React69__default.createElement(Drawer, { placement, ...props }, /* @__PURE__ */ React69__default.createElement(DrawerOverlay, null), /* @__PURE__ */ React69__default.createElement(DrawerContent, null, /* @__PURE__ */ React69__default.createElement(DrawerCloseButton, null), title && /* @__PURE__ */ React69__default.createElement(ModalHeader, null, title), /* @__PURE__ */ React69__default.createElement(DrawerBody, null, children)));
 };
-var PopoverWizardBody = ({ children }) => {
-  const [currentStep, setCurrentStep] = React69.useState(1);
-  const totalSteps = React69.Children.count(children);
-  const { isOpen } = usePopoverContext();
-  React69.useEffect(() => {
-    if (!isOpen && currentStep > 1) {
-      const id = setTimeout(() => setCurrentStep(1), 500);
-      return () => clearTimeout(id);
-    }
-  }, [isOpen, currentStep]);
-  return /* @__PURE__ */ React69.createElement(PopoverBody, null, /* @__PURE__ */ React69.createElement(Stack, { spacing: 1.5 }, /* @__PURE__ */ React69.createElement(Box, null, React69.Children.toArray(children)[currentStep - 1]), /* @__PURE__ */ React69.createElement(Flex, { gap: 3 }, /* @__PURE__ */ React69.createElement(StepIndicator, { totalSteps, currentStep }), /* @__PURE__ */ React69.createElement(
-    NextStepButton,
-    {
-      isLastStep: totalSteps === currentStep,
-      onNext: () => setCurrentStep((prev) => prev + 1)
+var EXPIRATION_DELAY = 1e3 * 60 * 60 * 24 * 30;
+var Nudge = ({
+  introducedDate,
+  name,
+  children,
+  content,
+  actions,
+  ...props
+}) => {
+  const { t: t2 } = useTranslation();
+  if (new Date(introducedDate).getTime() + EXPIRATION_DELAY < Date.now()) {
+    if (process.env.NODE_ENV === "development") {
+      console.warn(
+        `The nudge ${name} has been used for longer than 30 days. Please remove it from the codebase.
+        
+        This is a development only warning, and will not be shown in production.`
+      );
     }
-  ))));
-};
-var StepIndicator = ({ totalSteps, currentStep }) => {
-  const steps = createRange(1, totalSteps);
-  return /* @__PURE__ */ React69.createElement(Flex, { gap: 1, alignItems: "center" }, steps.map((step) => /* @__PURE__ */ React69.createElement(
-    Box,
+    return null;
+  }
+  return /* @__PURE__ */ React69__default.createElement(DarkMode, null, /* @__PURE__ */ React69__default.createElement(
+    Popover,
     {
-      key: step,
-      width: 1,
-      height: 1,
-      borderRadius: "50%",
-      transition: "medium",
-      transitionProperty: "background-color",
-      backgroundColor: step === currentStep ? "seaMist" : "greenHaze"
-    }
-  )));
+      arrowSize: 12,
+      arrowShadowColor: "none",
+      defaultIsOpen: true,
+      ...props
+    },
+    /* @__PURE__ */ React69__default.createElement(PopoverAnchor, null, children),
+    /* @__PURE__ */ React69__default.createElement(PopoverContent, { borderRadius: "sm" }, /* @__PURE__ */ React69__default.createElement(PopoverArrow, null), /* @__PURE__ */ React69__default.createElement(PopoverCloseButton, null), /* @__PURE__ */ React69__default.createElement(PopoverBody, { margin: 1 }, /* @__PURE__ */ React69__default.createElement(Box, { marginRight: 4 }, content), /* @__PURE__ */ React69__default.createElement(Box, { marginTop: 1.5 }, actions ?? /* @__PURE__ */ React69__default.createElement(ButtonGroup, null, /* @__PURE__ */ React69__default.createElement(Button, { variant: "tertiary", size: "xs" }, t2(texts20.close)), /* @__PURE__ */ React69__default.createElement(Button, { variant: "secondary", size: "xs", fontWeight: "bold" }, t2(texts20.showMe))))))
+  ));
 };
-var createRange = (start, end) => {
-  return new Array(end - start + 1).fill(null).map((_, i) => i + start);
+var texts20 = createTexts({
+  close: {
+    nb: "Lukk",
+    nn: "Lukk",
+    sv: "St\xE4ng",
+    en: "Close"
+  },
+  showMe: {
+    nb: "Vis meg",
+    nn: "Vis meg",
+    sv: "Visa mig",
+    en: "Show me"
+  }
+});
+var WizardNudge = ({
+  children,
+  name,
+  onClose,
+  content,
+  ...props
+}) => {
+  const [currentStep, setCurrentStep] = useState(1);
+  const totalSteps = content.length;
+  const isLastStep = totalSteps === currentStep;
+  const onNext = () => setCurrentStep((prev) => prev + 1);
+  return /* @__PURE__ */ React69__default.createElement(
+    Nudge,
+    {
+      onClose,
+      name,
+      content: content[currentStep - 1],
+      actions: /* @__PURE__ */ React69__default.createElement(Flex, { gap: 3, alignItems: "center" }, /* @__PURE__ */ React69__default.createElement(
+        ProgressIndicator,
+        {
+          activeStep: currentStep,
+          numberOfSteps: totalSteps
+        }
+      ), /* @__PURE__ */ React69__default.createElement(Box, null, /* @__PURE__ */ React69__default.createElement(NextOrCloseButton, { isLastStep, onNext }))),
+      ...props
+    },
+    children
+  );
 };
-var NextStepButton = ({ isLastStep, onNext }) => {
+var NextOrCloseButton = ({ isLastStep, onNext }) => {
   const { onClose } = usePopoverContext();
   const { t: t2 } = useTranslation();
-  return /* @__PURE__ */ React69.createElement(
+  return /* @__PURE__ */ React69__default.createElement(
     Button,
     {
       variant: "tertiary",
-      size: "sm",
-      color: "white",
-      leftIcon: isLastStep ? void 0 : /* @__PURE__ */ React69.createElement(ArrowRightFill18Icon, null),
-      onClick: isLastStep ? onClose : onNext
+      size: "xs",
+      leftIcon: isLastStep ? void 0 : /* @__PURE__ */ React69__default.createElement(ArrowRightFill18Icon, null),
+      onClick: isLastStep ? onClose : onNext,
+      width: "fit-content"
     },
-    t2(isLastStep ? texts20.finish : texts20.nextStep)
+    t2(isLastStep ? texts21.finish : texts21.nextStep)
   );
 };
-var texts20 = createTexts({
+var texts21 = createTexts({
   nextStep: {
     nb: "Neste",
     nn: "Neste",
@@ -4151,41 +4199,6 @@ var texts20 = createTexts({
     en: "Finish"
   }
 });
-var SimplePopover = ({
-  children,
-  triggerElement,
-  onClose,
-  isOpen,
-  defaultIsOpen,
-  placement = "bottom",
-  size: size2 = "sm",
-  withCloseButton = false,
-  borderRadius,
-  ...props
-}) => {
-  return /* @__PURE__ */ React69__default.createElement(DarkMode, null, /* @__PURE__ */ React69__default.createElement(
-    Popover,
-    {
-      onClose,
-      isOpen,
-      defaultIsOpen,
-      placement,
-      size: size2,
-      arrowSize: 12,
-      arrowShadowColor: "none",
-      ...props
-    },
-    triggerElement && /* @__PURE__ */ React69__default.createElement(PopoverTrigger, null, triggerElement),
-    /* @__PURE__ */ React69__default.createElement(PopoverContent, { borderRadius }, /* @__PURE__ */ React69__default.createElement(PopoverArrow, null), withCloseButton && /* @__PURE__ */ React69__default.createElement(PopoverCloseButton, null), /* @__PURE__ */ React69__default.createElement(PopoverBody, null, children))
-  ));
-};
-var WizardPopover = ({
-  children,
-  triggerElement,
-  withCloseButton = false
-}) => {
-  return /* @__PURE__ */ React69.createElement(DarkMode, null, /* @__PURE__ */ React69.createElement(Popover, { size: "lg" }, /* @__PURE__ */ React69.createElement(PopoverTrigger, null, triggerElement), /* @__PURE__ */ React69.createElement(PopoverContent, null, /* @__PURE__ */ React69.createElement(PopoverArrow, null), withCloseButton && /* @__PURE__ */ React69.createElement(PopoverCloseButton, null), /* @__PURE__ */ React69.createElement(PopoverWizardBody, null, children))));
-};
 var ProgressDot = ({ isActive }) => {
   const style = useMultiStyleConfig("ProgressIndicator");
   return /* @__PURE__ */ React69__default.createElement(
@@ -4217,12 +4230,19 @@ var ProgressIndicator = ({
       "aria-valuemin": 1,
       "aria-valuemax": numberOfSteps,
       "aria-valuenow": activeStep,
-      "aria-valuetext": t2(texts21.stepsOf(activeStep, numberOfSteps))
+      "aria-valuetext": t2(texts22.stepsOf(activeStep, numberOfSteps))
     },
-    /* @__PURE__ */ React69__default.createElement(Box, { __css: style.container }, Array.from({ length: numberOfSteps }, (_, i) => /* @__PURE__ */ React69__default.createElement(ProgressDot, { "aria-value": i + 1, isActive: activeStep === i + 1 })))
+    /* @__PURE__ */ React69__default.createElement(Box, { __css: style.container }, Array.from({ length: numberOfSteps }, (_, i) => /* @__PURE__ */ React69__default.createElement(
+      ProgressDot,
+      {
+        key: i,
+        "aria-value": i + 1,
+        isActive: activeStep === i + 1
+      }
+    )))
   );
 };
-var texts21 = createTexts({
+var texts22 = createTexts({
   stepsOf: (activeStep, numberOfSteps) => ({
     nb: `Steg ${activeStep} av ${numberOfSteps}`,
     nn: `Steg ${activeStep} av ${numberOfSteps}`,
@@ -4305,7 +4325,7 @@ var Stepper = ({
       /* @__PURE__ */ React69__default.createElement(
         IconButton,
         {
-          "aria-label": t2(texts22.back),
+          "aria-label": t2(texts23.back),
           icon: /* @__PURE__ */ React69__default.createElement(ArrowLeftFill24Icon, null),
           variant: "ghost",
           size: "sm",
@@ -4320,7 +4340,7 @@ var Stepper = ({
         }
       ),
       shownHeading && /* @__PURE__ */ React69__default.createElement(Text4, { flex: 1, variant: "sm", as: headingLevel, sx: style.title }, shownHeading),
-      /* @__PURE__ */ React69__default.createElement(Box, { sx: style.stepCounter }, t2(texts22.stepsOf(activeStep, numberOfSteps)))
+      /* @__PURE__ */ React69__default.createElement(Box, { sx: style.stepCounter }, t2(texts23.stepsOf(activeStep, numberOfSteps)))
     )), /* @__PURE__ */ React69__default.createElement(Flex, { justifyContent: "center", display: ["none", null, "flex"] }, steps.map((step, index) => /* @__PURE__ */ React69__default.createElement(
       StepperStep,
       {
@@ -4334,7 +4354,7 @@ var Stepper = ({
     ))))
   ));
 };
-var texts22 = createTexts({
+var texts23 = createTexts({
   stepsOf: (activeStep, numberOfSteps) => ({
     nb: `Steg ${activeStep}/${numberOfSteps}`,
     nn: `Steg ${activeStep}/${numberOfSteps}`,
@@ -9763,166 +9783,454 @@ var styles2 = {
     }
   })
 };
-var focusVisibleStyles = (props) => ({
-  _focusVisible: {
-    outlineWidth: "2px",
-    outlineColor: mode("greenHaze", "azure")(props),
-    outlineStyle: "solid",
-    outlineOffset: "1px"
-  }
-});
 
-// src/theme/components/accordion.ts
-var helpers = createMultiStyleConfigHelpers(accordionAnatomy.keys);
-var config3 = helpers.defineMultiStyleConfig({
-  baseStyle: (props) => ({
-    container: {
-      border: "none",
-      borderRadius: "sm"
-    },
-    button: {
-      transitionProperty: "background-color, color, border-radius, box-shadow, opacity",
-      transitionDuration: "normal",
-      border: "none",
-      borderRadius: "sm",
-      borderColor: "osloGrey",
-      display: "flex",
-      justifyContent: "space-between",
-      color: mode("darkGrey", "white")(props),
-      textAlign: "left",
-      fontFamily: "body",
-      fontWeight: "bold",
-      ...focusVisibleStyles(props),
-      _disabled: {
-        opacity: 0.4,
-        cursor: "not-allowed"
-      }
-    },
-    panel: {
-      paddingY: 2,
-      borderBottomRadius: "sm"
-    },
-    icon: {
-      fontSize: "1.25em"
-    }
-  }),
-  variants: {
-    list: (props) => ({
-      button: {
-        boxShadow: "none",
-        _hover: {
-          backgroundColor: mode("seaMist", "pine")(props)
-        },
-        _active: {
-          backgroundColor: mode("mint", "whiteAlpha.200")(props)
-        }
-      }
-    }),
-    outline: (props) => ({
-      container: {
-        boxShadow: getBoxShadowString({
-          borderColor: mode(
-            colors.blackAlpha["400"],
-            colors.whiteAlpha["400"]
-          )(props)
-        })
-      },
-      button: {
-        _expanded: {
-          borderBottomRadius: "none"
-        },
-        _hover: {
-          boxShadow: getBoxShadowString({
-            borderColor: mode("darkGrey", "white")(props),
-            borderWidth: 2
-          })
-        },
-        _active: {
-          backgroundColor: mode("mint", "whiteAlpha.100")(props),
-          boxShadow: getBoxShadowString({
-            borderColor: mode("darkGrey", colors.whiteAlpha[400])(props)
-          })
-        }
-      }
-    }),
-    card: (props) => ({
-      container: {
-        backgroundColor: mode("white", "whiteAlpha.100")(props),
-        boxShadow: getBoxShadowString({
-          baseShadow: mode("sm", "none")(props),
-          borderColor: mode("silver", "whiteAlpha.400")(props)
-        })
-      },
-      button: {
-        _expanded: {
-          borderBottomRadius: "none"
-        },
-        _hover: {
-          backgroundColor: mode("seaMist", "whiteAlpha.200")(props),
-          boxShadow: getBoxShadowString({
-            borderColor: mode("darkGrey", "white")(props),
-            borderWidth: 1
-          })
-        },
-        _active: {
-          backgroundColor: mode("mint", "inherit")(props),
-          boxShadow: getBoxShadowString({
-            baseShadow: "none",
-            borderWidth: 1,
-            borderColor: mode("darkGrey", "whiteAlpha.400")(props)
-          })
-        }
-      }
-    })
-  },
-  sizes: {
-    sm: {
-      button: {
-        fontSize: ["mobile.xs", null, "desktop.xs"],
-        paddingX: 2,
-        paddingY: 1,
-        minHeight: 6
-      },
-      panel: {
-        fontSize: ["mobile.xs", null, "desktop.xs"],
-        paddingX: 2
-      }
-    },
-    md: {
-      button: {
-        fontSize: ["mobile.sm", null, "desktop.sm"],
-        paddingX: 3,
-        paddingY: 1,
-        minHeight: 7
-      },
-      panel: {
-        fontSize: ["mobile.sm", null, "desktop.sm"],
-        paddingX: 3
-      }
-    },
-    lg: {
-      button: {
-        fontSize: ["mobile.sm", null, "desktop.sm"],
-        paddingX: 3,
-        paddingY: 2,
-        minHeight: 8
-      },
-      panel: {
-        fontSize: ["mobile.sm", null, "desktop.sm"],
-        paddingX: 3
-      }
-    }
-  },
-  defaultProps: {
-    variant: "list",
-    size: "sm"
+// src/theme/utils/background-utils.ts
+function baseBackground(state2, props) {
+  switch (state2) {
+    case "active":
+      return {
+        backgroundColor: mode("mint", "whiteAlpha.100")(props)
+      };
+    case "selected":
+      return {
+        backgroundColor: mode("pine", "coralGreen")(props)
+      };
+    case "disabled":
+      return {
+        backgroundColor: mode("silver", "whiteAlpha.100")(props)
+      };
+    case "hover":
+      return {
+        backgroundColor: "transparent"
+      };
+    default:
+      return {
+        backgroundColor: "transparent"
+      };
   }
-});
-var accordion_default = config3;
-
-// src/theme/components/alert.ts
-var parts = anatomy("alert").parts("container", "icon", "closeButton");
-var helpers2 = createMultiStyleConfigHelpers(parts.keys);
+}
+function ghostBackground(state2, props) {
+  switch (state2) {
+    case "hover": {
+      return {
+        backgroundColor: mode("seaMist", "whiteAlpha.100")(props)
+      };
+    }
+    case "active":
+      return {
+        backgroundColor: mode("mint", "whiteAlpha.200")(props)
+      };
+    case "focus":
+      return {
+        backgroundColor: "transparent"
+      };
+    case "selected": {
+      return {
+        backgroundColor: mode("mint", "whiteAlpha.200")(props)
+      };
+    }
+    case "default":
+    default:
+      return {
+        backgroundColor: "transparent"
+      };
+  }
+}
+function floatingBackground(state2, props) {
+  switch (state2) {
+    case "selected":
+      return {
+        backgroundColor: mode("mint", "pine")(props)
+      };
+    case "active":
+      return {
+        backgroundColor: mode(
+          "mint",
+          `color-mix(in srgb, ${props.theme.colors.accent}, ${colors.white} 30%)`
+        )(props)
+      };
+    case "hover":
+      return {
+        backgroundColor: mode(
+          "white",
+          `color-mix(in srgb, ${props.theme.colors.accent}, ${colors.white} 20%)`
+        )(props)
+      };
+    case "focus":
+      return {
+        backgroundColor: mode(
+          "white",
+          `color-mix(in srgb, ${props.theme.colors.accent}, ${colors.white} 40%)`
+        )(props)
+      };
+    case "default":
+    default:
+      return {
+        backgroundColor: mode(
+          "white",
+          `color-mix(in srgb, ${props.theme.colors.accent}, ${colors.white} 10%)`
+        )(props)
+      };
+  }
+}
+function accentBackground(state2, props) {
+  switch (state2) {
+    case "selected":
+      return {
+        backgroundColor: mode("primaryGreen", "coralGreen")(props)
+      };
+    case "active":
+      return {
+        backgroundColor: mode("mint", "darkTeal")(props)
+      };
+    case "hover":
+      return {
+        backgroundColor: mode("coralGreen", "greenHaze")(props)
+      };
+    case "focus":
+      return {
+        backgroundColor: mode("greenHaze", "azure")(props)
+      };
+    case "default":
+    default:
+      return {
+        backgroundColor: mode("seaMist", "pine")(props)
+      };
+  }
+}
+function brandBackground(state2, props) {
+  switch (state2) {
+    case "selected":
+    case "active":
+      return {
+        backgroundColor: mode("greenHaze", "seaMist")(props)
+      };
+    case "hover":
+      return {
+        backgroundColor: mode("darkTeal", "blueGreen")(props)
+      };
+    case "focus":
+    case "default":
+    default:
+      return {
+        backgroundColor: mode("pine", "coralGreen")(props)
+      };
+  }
+}
+function baseBorder(state2, props) {
+  switch (state2) {
+    case "hover":
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: mode("darkGrey", "white")(props),
+          borderWidth: 2
+        })
+      };
+    case "focus": {
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: mode("greenHaze", "azure")(props),
+          borderWidth: 2
+        })
+      };
+    }
+    case "disabled": {
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: mode("platinum", "whiteAlpha.400")(props)
+        })
+      };
+    }
+    case "selected":
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: mode("greenHaze", "azure")(props)
+        })
+      };
+    case "invalid": {
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: "brightRed",
+          borderWidth: 2
+        })
+      };
+    }
+    case "default":
+    default:
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props)
+        })
+      };
+  }
+}
+function floatingBorder(state2, props) {
+  switch (state2) {
+    case "hover":
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: mode("grey.300", "white")(props)
+        })
+      };
+    case "selected":
+    case "focus":
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: mode("greenHaze", "azure")(props),
+          borderWidth: 2
+        })
+      };
+    case "active":
+    case "default":
+    default:
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: mode("grey.200", "whiteAlpha.400")(props),
+          baseShadow: "sm"
+        })
+      };
+  }
+}
+function accentBorder(state2, props) {
+  switch (state2) {
+    case "selected":
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: mode("primaryGreen", "coralGreen")(props),
+          borderWidth: 2
+        })
+      };
+    case "active":
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: mode("mint", "darkTeal")(props),
+          borderWidth: 2
+        })
+      };
+    case "hover":
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: mode("coralGreen", "greenHaze")(props),
+          borderWidth: 2
+        })
+      };
+    case "focus":
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: mode("greenHaze", "azure")(props),
+          borderWidth: 2
+        })
+      };
+    case "default":
+    default:
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: mode("seaMist", "pine")(props),
+          borderWidth: 2
+        })
+      };
+  }
+}
+function brandBorder(state2, props) {
+  switch (state2) {
+    case "selected":
+    case "active":
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: mode("greenHaze", "seaMist")(props),
+          borderWidth: 2
+        })
+      };
+    case "hover":
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: mode("darkTeal", "blueGreen")(props),
+          borderWidth: 2
+        })
+      };
+    case "focus":
+    case "default":
+    default:
+      return {
+        boxShadow: getBoxShadowString({
+          borderColor: mode("pine", "coralGreen")(props),
+          borderWidth: 2
+        })
+      };
+  }
+}
+var focusVisibleStyles = (props) => ({
+  _focusVisible: {
+    outlineWidth: "2px",
+    outlineColor: mode("greenHaze", "azure")(props),
+    outlineStyle: "solid",
+    outlineOffset: "1px"
+  }
+});
+function baseText(state2, props) {
+  switch (state2) {
+    case "selected":
+      return {
+        color: mode("white", "darkTeal")(props)
+      };
+    case "disabled":
+      return {
+        color: mode(
+          "white",
+          `color-mix(in srgb, ${props.theme.colors.accent}, ${colors.white} 40%)`
+        )(props)
+      };
+    default:
+      return {
+        color: mode("darkGrey", "white")(props)
+      };
+  }
+}
+function accentText(state2, props) {
+  switch (state2) {
+    case "selected":
+      return {
+        color: mode("white", "darkTeal")(props)
+      };
+    case "default":
+    default:
+      return {
+        color: mode("darkTeal", "seaMist")(props)
+      };
+  }
+}
+
+// src/theme/components/accordion.ts
+var helpers = createMultiStyleConfigHelpers(accordionAnatomy.keys);
+var config3 = helpers.defineMultiStyleConfig({
+  baseStyle: (props) => ({
+    container: {
+      border: "none",
+      borderRadius: "sm"
+    },
+    button: {
+      transitionProperty: "background-color, color, border-radius, box-shadow, opacity",
+      transitionDuration: "normal",
+      border: "none",
+      borderRadius: "sm",
+      borderColor: "osloGrey",
+      display: "flex",
+      justifyContent: "space-between",
+      ...baseText("default", props),
+      textAlign: "left",
+      fontFamily: "body",
+      fontWeight: "bold",
+      ...focusVisibleStyles(props),
+      _disabled: {
+        opacity: 0.4,
+        cursor: "not-allowed"
+      }
+    },
+    panel: {
+      paddingY: 2,
+      borderBottomRadius: "sm"
+    },
+    icon: {
+      fontSize: "1.25em"
+    }
+  }),
+  variants: {
+    ghost: (props) => ({
+      button: {
+        boxShadow: "none",
+        _hover: {
+          ...ghostBackground("hover", props)
+        },
+        _active: {
+          ...ghostBackground("active", props)
+        }
+      }
+    }),
+    base: (props) => ({
+      container: {
+        ...baseBorder("default", props)
+      },
+      button: {
+        _expanded: {
+          borderBottomRadius: "none"
+        },
+        _hover: {
+          ...baseBorder("hover", props)
+        },
+        _active: {
+          ...baseBackground("active", props),
+          ...baseBorder("default", props)
+        }
+      }
+    }),
+    floating: (props) => ({
+      container: {
+        ...floatingBackground("default", props),
+        ...floatingBorder("default", props)
+      },
+      button: {
+        _expanded: {
+          borderBottomRadius: "none"
+        },
+        _hover: {
+          ...ghostBackground("hover", props),
+          ...floatingBorder("default", props)
+        },
+        _active: {
+          ...ghostBackground("active", props),
+          ...floatingBorder("default", props)
+        }
+      }
+    })
+  },
+  sizes: {
+    sm: {
+      button: {
+        fontSize: ["mobile.xs", null, "desktop.xs"],
+        paddingX: 2,
+        paddingY: 1,
+        minHeight: 6
+      },
+      panel: {
+        fontSize: ["mobile.xs", null, "desktop.xs"],
+        paddingX: 2
+      }
+    },
+    md: {
+      button: {
+        fontSize: ["mobile.sm", null, "desktop.sm"],
+        paddingX: 3,
+        paddingY: 1,
+        minHeight: 7
+      },
+      panel: {
+        fontSize: ["mobile.sm", null, "desktop.sm"],
+        paddingX: 3
+      }
+    },
+    lg: {
+      button: {
+        fontSize: ["mobile.sm", null, "desktop.sm"],
+        paddingX: 3,
+        paddingY: 2,
+        minHeight: 8
+      },
+      panel: {
+        fontSize: ["mobile.sm", null, "desktop.sm"],
+        paddingX: 3
+      }
+    }
+  },
+  defaultProps: {
+    variant: "ghost",
+    size: "sm"
+  }
+});
+var accordion_default = config3;
+
+// src/theme/components/alert.ts
+var parts = anatomy("alert").parts("container", "icon", "closeButton");
+var helpers2 = createMultiStyleConfigHelpers(parts.keys);
 var config4 = helpers2.defineMultiStyleConfig({
   baseStyle: {
     container: {
@@ -10237,7 +10545,6 @@ var config6 = defineStyleConfig$1({
       minHeight: 5,
       minWidth: 5,
       fontSize: "16px",
-      paddingX: 2,
       fontWeight: "normal"
     }
   },
@@ -10327,164 +10634,78 @@ function getColorSchemeClickableProps({ colorScheme, size: size2 }) {
           baseShadow,
           borderColor: "steel"
         })
-      };
-    default:
-      return {
-        backgroundColor: ((_a6 = colors[colorScheme]) == null ? void 0 : _a6[100]) ?? "platinum",
-        boxShadow: getBoxShadowString({
-          baseShadow,
-          borderColor: ((_b5 = colors[colorScheme]) == null ? void 0 : _b5[200]) ?? "silver"
-        })
-      };
-  }
-}
-var getColorSchemeHoverProps = (props) => {
-  var _a6, _b5;
-  const { colorScheme, size: size2 } = props;
-  const baseShadow = size2 === "lg" ? "lg" : "md";
-  switch (colorScheme) {
-    case "white":
-      return {
-        backgroundColor: mode("white", "whiteAlpha.200")(props),
-        boxShadow: getBoxShadowString({
-          baseShadow,
-          borderColor: colors.steel
-        })
-      };
-    case "grey":
-      return {
-        boxShadow: getBoxShadowString({
-          baseShadow,
-          borderColor: colors.osloGrey
-        })
-      };
-    default:
-      return {
-        backgroundColor: ((_a6 = colors[colorScheme]) == null ? void 0 : _a6[200]) ?? "silver",
-        boxShadow: getBoxShadowString({
-          baseShadow,
-          borderColor: ((_b5 = colors[colorScheme]) == null ? void 0 : _b5[400]) ?? colors.silver
-        })
-      };
-  }
-};
-var getColorSchemeActiveProps = (props) => {
-  var _a6, _b5;
-  const { colorScheme, size: size2 } = props;
-  const baseShadow = size2 === "lg" ? "sm" : "none";
-  switch (colorScheme) {
-    case "white":
-      return {
-        backgroundColor: mode("mint", "teal")(props),
-        boxShadow: getBoxShadowString({
-          baseShadow,
-          borderColor: colors.silver
-        })
-      };
-    case "grey":
-      return {
-        backgroundColor: "white",
-        boxShadow: getBoxShadowString({
-          baseShadow,
-          borderColor: colors.steel
-        })
-      };
-    default:
-      return {
-        backgroundColor: ((_a6 = colors[colorScheme]) == null ? void 0 : _a6[50]) ?? "lightGrey",
-        boxShadow: getBoxShadowString({
-          baseShadow,
-          borderColor: ((_b5 = colors[colorScheme]) == null ? void 0 : _b5[100]) ?? colors.silver
-        })
-      };
-  }
-};
-function baseBackground(state2, props) {
-  switch (state2) {
-    case "active":
-      return {
-        backgroundColor: mode("mint", "whiteAlpha.100")(props)
-      };
-    case "selected":
-      return {
-        backgroundColor: mode("pine", "coralGreen")(props)
-      };
-    case "disabled":
-      return {
-        backgroundColor: mode("silver", "whiteAlpha.100")(props)
-      };
-    default:
-      return {
-        backgroundColor: "transparent"
-      };
-  }
-}
-function ghostBackground(state2, props) {
-  switch (state2) {
-    case "hover": {
-      return {
-        backgroundColor: mode("seaMist", "whiteAlpha.100")(props)
-      };
-    }
-    case "active":
-      return {
-        backgroundColor: mode("seaMist", "whiteAlpha.200")(props)
-      };
-    case "focus":
-      return {
-        backgroundColor: "transparent"
-      };
-    case "selected": {
-      return {
-        backgroundColor: mode("mint", "whiteAlpha.200")(props)
-      };
-    }
-    case "default":
+      };
     default:
       return {
-        backgroundColor: "transparent"
+        backgroundColor: ((_a6 = colors[colorScheme]) == null ? void 0 : _a6[100]) ?? "platinum",
+        boxShadow: getBoxShadowString({
+          baseShadow,
+          borderColor: ((_b5 = colors[colorScheme]) == null ? void 0 : _b5[200]) ?? "silver"
+        })
       };
   }
 }
-function floatingBackground(state2, props) {
-  switch (state2) {
-    case "selected":
+var getColorSchemeHoverProps = (props) => {
+  var _a6, _b5;
+  const { colorScheme, size: size2 } = props;
+  const baseShadow = size2 === "lg" ? "lg" : "md";
+  switch (colorScheme) {
+    case "white":
       return {
-        backgroundColor: mode("mint", "pine")(props)
+        backgroundColor: mode("white", "whiteAlpha.200")(props),
+        boxShadow: getBoxShadowString({
+          baseShadow,
+          borderColor: colors.steel
+        })
       };
-    case "active":
+    case "grey":
       return {
-        backgroundColor: mode(
-          "mint",
-          `color-mix(in srgb, ${props.theme.colors.accent}, ${colors.white} 30%)`
-        )(props)
+        boxShadow: getBoxShadowString({
+          baseShadow,
+          borderColor: colors.osloGrey
+        })
       };
-    case "hover":
+    default:
       return {
-        backgroundColor: mode(
-          "white",
-          `color-mix(in srgb, ${props.theme.colors.accent}, ${colors.white} 20%)`
-        )(props)
+        backgroundColor: ((_a6 = colors[colorScheme]) == null ? void 0 : _a6[200]) ?? "silver",
+        boxShadow: getBoxShadowString({
+          baseShadow,
+          borderColor: ((_b5 = colors[colorScheme]) == null ? void 0 : _b5[400]) ?? colors.silver
+        })
       };
-    case "focus":
+  }
+};
+var getColorSchemeActiveProps = (props) => {
+  var _a6, _b5;
+  const { colorScheme, size: size2 } = props;
+  const baseShadow = size2 === "lg" ? "sm" : "none";
+  switch (colorScheme) {
+    case "white":
       return {
-        backgroundColor: mode(
-          "white",
-          `color-mix(in srgb, ${props.theme.colors.accent}, ${colors.white} 40%)`
-        )(props)
+        backgroundColor: mode("mint", "teal")(props),
+        boxShadow: getBoxShadowString({
+          baseShadow,
+          borderColor: colors.silver
+        })
+      };
+    case "grey":
+      return {
+        backgroundColor: "white",
+        boxShadow: getBoxShadowString({
+          baseShadow,
+          borderColor: colors.steel
+        })
       };
-    case "default":
     default:
       return {
-        backgroundColor: mode(
-          "white",
-          `color-mix(in srgb, ${props.theme.colors.accent}, ${colors.white} 10%)`
-        )(props)
+        backgroundColor: ((_a6 = colors[colorScheme]) == null ? void 0 : _a6[50]) ?? "lightGrey",
+        boxShadow: getBoxShadowString({
+          baseShadow,
+          borderColor: ((_b5 = colors[colorScheme]) == null ? void 0 : _b5[100]) ?? colors.silver
+        })
       };
   }
-}
-
-// src/theme/components/card-select.ts
+};
 var parts2 = anatomy("card-select").parts("trigger", "card");
 var helpers3 = createMultiStyleConfigHelpers(parts2.keys);
 var config8 = helpers3.defineMultiStyleConfig({
@@ -10699,66 +10920,152 @@ var helpers5 = createMultiStyleConfigHelpers$1(parts3.keys);
 var config10 = helpers5.defineMultiStyleConfig({
   baseStyle: (props) => ({
     container: {
-      backgroundColor: mode("white", "transparent")(props),
-      boxShadow: getBoxShadowString({ borderColor: "celadon" }),
-      color: mode("darkTeal", "white")(props),
       display: "inline-flex",
       alignItems: "center",
       fontSize: "16px",
       px: 1,
+      cursor: "pointer",
       _checked: {
-        color: "white",
-        background: "pine",
-        boxShadow: getBoxShadowString({ borderColor: "celadon" })
+        ...accentText("selected", props),
+        ...accentBackground("selected", props),
+        ...accentBorder("selected", props),
+        _hover: {
+          ...brandBackground("hover", props),
+          ...baseText("selected", props),
+          ...brandBorder("hover", props)
+        },
+        _active: {
+          ...baseText("selected", props),
+          ...brandBackground("active", props),
+          ...brandBorder("active", props)
+        }
       },
-      "input:focus-visible + &": focusVisibleStyles(props)._focusVisible,
-      "@media (hover:hover)": {
+      _disabled: {
+        cursor: "not-allowed",
+        boxShadow: "none",
+        ...baseText("disabled", props),
+        ...baseBackground("disabled", props),
         _hover: {
-          color: mode("darkTeal", "white")(props),
-          boxShadow: getBoxShadowString({
-            borderColor: "greenHaze",
-            borderWidth: 2
-          }),
-          background: mode("coralGreen", "whiteAlpha.200")(props),
-          cursor: "pointer"
+          ...baseBackground("disabled", props),
+          boxShadow: "none",
+          ...baseText("disabled", props)
+        },
+        _checked: {
+          cursor: "not-allowed",
+          boxShadow: "none",
+          ...baseText("disabled", props),
+          ...baseBackground("disabled", props),
+          _hover: {
+            ...baseBackground("disabled", props),
+            boxShadow: "none",
+            ...baseText("disabled", props)
+          }
         }
       },
-      _active: {
-        backgroundColor: mode("mint", "whiteAlpha.300")(props),
-        boxShadow: getBoxShadowString({
-          borderColor: "pine"
-        })
-      }
+      "input:focus-visible + &": focusVisibleStyles(props)._focusVisible
     },
     icon: {
       mr: props.hasLabel ? 1 : 0
     }
   }),
+  variants: {
+    base: (props) => ({
+      container: {
+        ...baseBackground("default", props),
+        ...baseBorder("default", props),
+        ...baseText("default", props),
+        "@media (hover:hover)": {
+          _hover: {
+            ...baseText("default", props),
+            ...baseBorder("hover", props),
+            ...baseBackground("hover", props)
+          }
+        },
+        _active: {
+          ...baseBackground("active", props),
+          ...baseBorder("default", props)
+        }
+      }
+    }),
+    accent: (props) => ({
+      container: {
+        ...accentBackground("default", props),
+        ...accentText("default", props),
+        ...accentBorder("default", props),
+        "@media (hover:hover)": {
+          _hover: {
+            ...accentBackground("hover", props),
+            ...accentBorder("hover", props),
+            ...accentText("default", props)
+          }
+        },
+        _active: {
+          ...accentText("default", props),
+          ...accentBorder("active", props),
+          ...accentBackground("active", props)
+        }
+      },
+      _active: {
+        ...accentText("default", props),
+        ...accentBorder("active", props),
+        ...accentBackground("active", props)
+      }
+    }),
+    floating: (props) => ({
+      container: {
+        ...floatingBackground("default", props),
+        ...baseText("default", props),
+        ...floatingBorder("default", props),
+        _hover: {
+          ...floatingBackground("hover", props),
+          ...floatingBorder("hover", props),
+          ...baseText("default", props)
+        },
+        _active: {
+          ...floatingBackground("active", props),
+          ...floatingBorder("active", props),
+          ...baseText("default", props)
+        }
+      }
+    })
+  },
   sizes: {
     sm: {
       container: {
-        borderRadius: "15px",
+        borderRadius: "30px",
+        _checked: {
+          borderRadius: "9px"
+        },
         height: "30px",
         px: 1.5
       }
     },
     md: {
       container: {
-        borderRadius: "18px",
+        borderRadius: "30px",
+        _checked: {
+          borderRadius: "12px"
+        },
         height: "36px",
         px: 2
       }
     },
     lg: {
       container: {
-        borderRadius: "21px",
+        borderRadius: "30px",
+        _checked: {
+          borderRadius: "12px"
+        },
         height: "42px",
         px: 2
       }
     },
     xl: {
       container: {
-        borderRadius: "27px",
+        borderRadius: "30px",
+        _checked: {
+          borderRadius: "18px"
+        },
         height: "54px",
         px: 3
       }
@@ -10874,10 +11181,6 @@ var config13 = helpers6.defineMultiStyleConfig({
     },
     calendarTriggerButton: {
       backgroundColor: mode("white", "night")(props),
-      boxShadow: getBoxShadowString({
-        borderColor: mode("darkGrey", "white")(props),
-        borderWidth: 1
-      }),
       width: 8,
       display: "flex",
       alignItems: "center",
@@ -11404,79 +11707,6 @@ var config17 = defineStyleConfig$1({
   }
 });
 var form_label_default = config17;
-function baseBorder(state2, props) {
-  switch (state2) {
-    case "hover":
-      return {
-        boxShadow: getBoxShadowString({
-          borderColor: mode("darkGrey", "white")(props),
-          borderWidth: 2
-        })
-      };
-    case "focus": {
-      return {
-        boxShadow: getBoxShadowString({
-          borderColor: mode("greenHaze", "azure")(props),
-          borderWidth: 2
-        })
-      };
-    }
-    case "disabled": {
-      return {
-        boxShadow: getBoxShadowString({
-          borderColor: mode("platinum", "whiteAlpha.400")(props)
-        })
-      };
-    }
-    case "selected":
-      return {
-        boxShadow: getBoxShadowString({
-          borderColor: mode("greenHaze", "azure")(props)
-        })
-      };
-    case "invalid": {
-      return {
-        boxShadow: getBoxShadowString({
-          borderColor: "brightRed",
-          borderWidth: 2
-        })
-      };
-    }
-    case "default":
-    default:
-      return {
-        boxShadow: getBoxShadowString({
-          borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props)
-        })
-      };
-  }
-}
-function floatingBorder(state2, props) {
-  switch (state2) {
-    case "hover":
-      return {
-        boxShadow: getBoxShadowString({
-          borderColor: mode("grey.300", "white")(props)
-        })
-      };
-    case "selected":
-    case "focus":
-      return {
-        boxShadow: getBoxShadowString({
-          borderColor: mode("greenHaze", "azure")(props),
-          borderWidth: 2
-        })
-      };
-    case "active":
-    case "default":
-    default:
-      return {
-        boxShadow: getBoxShadowString({
-          borderColor: mode("grey.200", "whiteAlpha.400")(props)
-        })
-      };
-  }
-}
 
 // src/theme/utils/sr-utils.ts
 var srOnly2 = {
@@ -12381,7 +12611,7 @@ var config27 = helpers18.defineMultiStyleConfig({
       zIndex: "popover"
     },
     content: {
-      [$popperBg2.variable]: mode(`colors.darkTeal`, `colors.pine`)(props),
+      [$popperBg2.variable]: `colors.darkTeal`,
       backgroundColor: $popperBg2.reference,
       [$arrowBg3.variable]: $popperBg2.reference,
       [$arrowShadowColor2.variable]: `colors.blackAlpha.300`,
@@ -12403,14 +12633,13 @@ var config27 = helpers18.defineMultiStyleConfig({
     closeButton: {
       position: "absolute",
       color: "white",
-      hover: "whiteAlpha.100",
       ...focusVisibleStyles(props),
       _active: {
         backgroundColor: "whiteAlpha.200"
       },
-      borderRadius: "xs",
-      top: 1,
-      insetEnd: 1,
+      borderRadius: "sm",
+      top: 2,
+      right: 2,
       width: 2,
       height: 2,
       padding: 1
@@ -13453,7 +13682,7 @@ var ToastIcon = ({ variant }) => {
     Icon,
     {
       flexShrink: 0,
-      "aria-label": t2(texts23[variant]),
+      "aria-label": t2(texts24[variant]),
       marginRight: 1,
       marginY: 1.5,
       color: "darkGrey"
@@ -13470,7 +13699,7 @@ var getIcon3 = (variant) => {
       return ErrorOutline24Icon;
   }
 };
-var texts23 = createTexts({
+var texts24 = createTexts({
   info: {
     nb: "Informasjon",
     nn: "Informasjon",
@@ -13514,13 +13743,13 @@ var ClosableToast = ({
     {
       sx: styles3.dismissButton,
       variant: "ghost",
-      "aria-label": t2(texts24.dismiss),
+      "aria-label": t2(texts25.dismiss),
       icon: /* @__PURE__ */ React69__default.createElement(CloseFill18Icon, null),
       onClick: onClose
     }
   ));
 };
-var texts24 = createTexts({
+var texts25 = createTexts({
   dismiss: {
     nb: "Lukk",
     nn: "Lukk",
@@ -13572,6 +13801,33 @@ var getToastComponent = (opts) => {
   }
   return ({ id }) => /* @__PURE__ */ React69__default.createElement(BaseToast, { id, variant: opts.variant }, opts.text);
 };
+var Tooltip = ({
+  children,
+  content,
+  onClose,
+  isOpen,
+  defaultIsOpen,
+  placement = "bottom",
+  size: size2 = "sm",
+  withCloseButton = false,
+  ...props
+}) => {
+  return /* @__PURE__ */ React69__default.createElement(DarkMode, null, /* @__PURE__ */ React69__default.createElement(
+    Popover,
+    {
+      onClose,
+      isOpen,
+      defaultIsOpen,
+      placement,
+      size: size2,
+      arrowSize: 12,
+      arrowShadowColor: "none",
+      ...props
+    },
+    /* @__PURE__ */ React69__default.createElement(PopoverTrigger, null, children),
+    /* @__PURE__ */ React69__default.createElement(PopoverContent, null, /* @__PURE__ */ React69__default.createElement(PopoverArrow, null), withCloseButton && /* @__PURE__ */ React69__default.createElement(PopoverCloseButton, null), /* @__PURE__ */ React69__default.createElement(PopoverBody, null, content))
+  ));
+};
 
 // ../../node_modules/@zag-js/element-size/dist/track-size.mjs
 function trackElementSize(element, callback) {
@@ -13678,4 +13934,4 @@ function slugify(text, maxLength = 50) {
   return text.normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/[\u00C6\u00E6]/g, "ae").replace(/[\u00D8\u00F8]/g, "oe").replace(/[\u00C5\u00E5]/g, "aa").toLowerCase().replace(/\s+/g, "-").replace(/[^\w-]+/g, "").replace(/--+/g, "-").replace(/^-+/, "").replace(/-+$/, "").substring(0, maxLength);
 }
 
-export { Accordion, AttachedInputs, Badge, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, ColorInlineLoader, ColorSpinner, Combobox, 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, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightSpinner, LineIcon, ListBox, ModalHeader, NativeSelect, NumericStepper, PasswordInput, PhoneNumberInput, PlayPauseButton, PopoverWizardBody, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, SearchInput, SimpleDrawer, SimplePopover, Skeleton, SkeletonCircle, SkeletonText, SkipButton, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Table, Tabs, Text4 as Text, TextLink, Textarea, TimePicker, TravelTag, VyLogo, WizardPopover, brandTheme, createTexts, fontFaces, slugify, theme, useSize, useToast, useTranslation };
+export { Accordion, AttachedInputs, Badge, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, ColorInlineLoader, ColorSpinner, Combobox, 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, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightSpinner, LineIcon, ListBox, ModalHeader, NativeSelect, Nudge, NumericStepper, PasswordInput, PhoneNumberInput, PlayPauseButton, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, SearchInput, SimpleDrawer, Skeleton, SkeletonCircle, SkeletonText, SkipButton, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Table, Tabs, Text4 as Text, TextLink, Textarea, TimePicker, Tooltip, TravelTag, VyLogo, WizardNudge, brandTheme, createTexts, fontFaces, slugify, theme, useSize, useToast, useTranslation };