@vygruppen/spor-react 8.3.0 → 9.0.0

package/dist/{chunk-42ZK3WXN.mjs → chunk-BWLVKMWU.mjs}

@@ -2,7 +2,7 @@ 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, 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';
+export { AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Box, Center, Collapse, Container, DarkMode, DrawerBody, DrawerCloseButton, DrawerFooter, DrawerOverlay, Fade, Flex, FormHelperText, Grid, GridItem, HStack, Image, Img, InputGroup, LightMode, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalOverlay, OrderedList, Portal, ScaleFade, SimpleGrid, Slide, SlideFade, Spacer, Tab, TabList, TabPanel, TabPanels, TableCaption, Tbody, Td, Tfoot, Th, Thead, Tr, UnorderedList, VStack, Wrap, WrapItem, defineStyleConfig, extendTheme, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToken } from '@chakra-ui/react';
 import * as 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';
@@ -1037,45 +1037,17 @@ var ProgressBar = ({
     value,
     "aria-label": ariaLabel || t2(texts.label(value))
   });
+  const styles3 = useMultiStyleConfig("ProgressBar", {});
   return /* @__PURE__ */ React69__default.createElement(React69__default.Fragment, null, /* @__PURE__ */ React69__default.createElement(
     Box,
     {
       ...progressBarProps,
       title: t2(texts.label(value)),
-      minWidth: "100px",
+      __css: styles3.container,
       ...rest
     },
-    /* @__PURE__ */ React69__default.createElement(
-      Flex,
-      {
-        backgroundColor: "coralGreen",
-        borderRadius: "sm",
-        width,
-        justifyContent: "flex-start",
-        marginX: "auto"
-      },
-      /* @__PURE__ */ React69__default.createElement(
-        Box,
-        {
-          backgroundColor: "greenHaze",
-          borderRadius: "sm",
-          height,
-          width: `${value}%`,
-          maxWidth: "100%",
-          transition: "width .2s ease-out"
-        }
-      )
-    ),
-    currentLoadingText && /* @__PURE__ */ React69__default.createElement(
-      Text,
-      {
-        textAlign: "center",
-        marginTop: 2,
-        fontWeight: "bold",
-        ...labelProps
-      },
-      currentLoadingText
-    )
+    /* @__PURE__ */ React69__default.createElement(Box, { width, __css: styles3.background }, /* @__PURE__ */ React69__default.createElement(Box, { __css: styles3.progress, height, width: `${value}%` })),
+    currentLoadingText && /* @__PURE__ */ React69__default.createElement(Text, { sx: styles3.description, ...labelProps }, currentLoadingText)
   ));
 };
 var texts = createTexts({
@@ -1608,7 +1580,8 @@ var Heading = ({
   ...props
 }) => {
   const id = externalId ?? (autoId && typeof props.children === "string") ? slugify(props.children) : void 0;
-  return /* @__PURE__ */ React69__default.createElement(Text, { as, textStyle: variant, id, ...props });
+  const color2 = useColorModeValue("text.primary.light", "text.primary.dark");
+  return /* @__PURE__ */ React69__default.createElement(Text, { as, textStyle: variant, id, color: color2, ...props });
 };
 var Text4 = forwardRef(
   ({ variant = "sm", ...props }, ref) => {
@@ -2218,7 +2191,8 @@ function DateRangePicker({
       ...dialogProps,
       isOpen: state2.isOpen,
       onOpen: state2.open,
-      onClose: state2.close
+      onClose: state2.close,
+      flip: false
     },
     /* @__PURE__ */ React69__default.createElement(InputGroup, { ...groupProps, width: "auto", display: "inline-flex" }, /* @__PURE__ */ React69__default.createElement(PopoverAnchor, null, /* @__PURE__ */ React69__default.createElement(
       StyledField,
@@ -2619,7 +2593,7 @@ var ChoiceChip = forwardRef((props, ref) => {
     children,
     icon,
     isDisabled,
-    size: size2 = "md",
+    size: size2 = "sm",
     chipType = "choice",
     variant = "base"
   } = props;
@@ -3089,48 +3063,6 @@ var NativeSelect = forwardRef(
     ), label && /* @__PURE__ */ React69__default.createElement(FormLabel3, null, label));
   }
 );
-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/input/NumericStepper.tsx
 function NumericStepper({
   name: nameProp,
   id: idProp,
@@ -3146,17 +3078,15 @@ function NumericStepper({
   ...boxProps
 }) {
   const { t: t2 } = useTranslation();
+  const styles3 = useMultiStyleConfig("NumericStepper", {});
   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");
   const clampedStepSize = Math.max(Math.min(stepSize, 10), 1);
-  return /* @__PURE__ */ React69__default.createElement(Flex, { alignItems: "center", ...boxProps }, /* @__PURE__ */ React69__default.createElement(
+  return /* @__PURE__ */ React69__default.createElement(Flex, { __css: styles3.container, ...boxProps }, /* @__PURE__ */ React69__default.createElement(
     VerySmallButton,
     {
       icon: /* @__PURE__ */ React69__default.createElement(SubtractIcon, { stepLabel: clampedStepSize }),
@@ -3176,38 +3106,11 @@ function NumericStepper({
       value,
       ...formControlProps,
       id: !showZero && value === 0 ? void 0 : formControlProps.id,
-      fontSize: "sm",
-      fontWeight: "bold",
+      sx: styles3.input,
       width: `${Math.max(value.toString().length + 1, 3)}ch`,
-      marginX: 1,
-      paddingX: 1,
-      borderRadius: "xs",
-      textAlign: "center",
-      backgroundColor,
-      color: textColor,
-      transition: "box-shadow .1s ease-out",
       visibility: !showZero && value === 0 ? "hidden" : "visible",
       "aria-live": "assertive",
       "aria-label": value.toString(),
-      _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)) {
@@ -3219,14 +3122,7 @@ function NumericStepper({
   ) : /* @__PURE__ */ React69__default.createElement(
     chakra.text,
     {
-      fontSize: "sm",
-      fontWeight: "bold",
-      width: "4ch",
-      marginX: 1,
-      paddingX: 1,
-      textAlign: "center",
-      color: textColor,
-      transition: "box-shadow .1s ease-out",
+      sx: styles3.text,
       visibility: !showZero && value === 0 ? "hidden" : "visible",
       "aria-label": value.toString()
     },
@@ -3244,16 +3140,8 @@ function NumericStepper({
   ));
 }
 var VerySmallButton = (props) => {
-  return /* @__PURE__ */ React69__default.createElement(
-    IconButton,
-    {
-      variant: "primary",
-      size: "xs",
-      minWidth: "24px",
-      minHeight: "24px",
-      ...props
-    }
-  );
+  const styles3 = useMultiStyleConfig("NumericStepper", {});
+  return /* @__PURE__ */ React69__default.createElement(IconButton, { variant: "primary", size: "xs", sx: styles3.button, ...props });
 };
 var SubtractIcon = (props) => /* @__PURE__ */ React69__default.createElement(React69__default.Fragment, null, /* @__PURE__ */ React69__default.createElement(
   Box,
@@ -3352,6 +3240,8 @@ var PasswordInput = forwardRef(
       {
         variant: "ghost",
         type: "button",
+        fontWeight: "normal",
+        size: "sm",
         onClick: onToggle,
         borderRadius: "sm",
         marginRight: 1,
@@ -3437,7 +3327,7 @@ var PhoneNumberInput = forwardRef(
           });
         },
         position: "relative",
-        left: "-1px"
+        left: "1px"
       }
     ));
   }
@@ -3450,7 +3340,7 @@ var texts14 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-DYAFPSID.mjs'));
+var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-LFDBAHV7.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React69__default.createElement(Radio$1, { ...props, ref });
 });
@@ -3513,7 +3403,7 @@ var texts15 = createTexts({
 });
 var Switch = forwardRef(
   ({ size: size2 = "md", ...props }, ref) => {
-    return /* @__PURE__ */ React69__default.createElement(Switch$1, { variant: "solid", size: size2, ...props, ref });
+    return /* @__PURE__ */ React69__default.createElement(Switch$1, { size: size2, ...props, ref });
   }
 );
 var Textarea = forwardRef((props, ref) => {
@@ -4546,7 +4436,7 @@ var breakpoints = {
 var breakpoints_default = breakpoints;
 
 // ../../node_modules/@chakra-ui/theme/dist/chunk-E47HH2QS.mjs
-var colors2 = {
+var colors = {
   transparent: "transparent",
   current: "currentColor",
   black: "#000000",
@@ -4768,7 +4658,7 @@ var colors2 = {
     900: "#003F5E"
   }
 };
-var colors_default = colors2;
+var colors_default = colors;
 
 // ../../node_modules/@chakra-ui/theme/dist/chunk-VIVTPWHP.mjs
 var radii = {
@@ -4785,7 +4675,7 @@ var radii = {
 var radius_default = radii;
 
 // ../../node_modules/@chakra-ui/theme/dist/chunk-IZUFFCXS.mjs
-var shadows2 = {
+var shadows = {
   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)",
@@ -4798,7 +4688,7 @@ var shadows2 = {
   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 = shadows2;
+var shadows_default = shadows;
 
 // ../../node_modules/@chakra-ui/theme/dist/chunk-HQ6WXDYV.mjs
 var blur = {
@@ -6267,16 +6157,16 @@ Object.assign({}, space, layout, flexbox, grid, position);
 function defineStyle(styles3) {
   return styles3;
 }
-function defineStyleConfig(config39) {
-  return config39;
+function defineStyleConfig(config41) {
+  return config41;
 }
-function createMultiStyleConfigHelpers(parts16) {
+function createMultiStyleConfigHelpers(parts18) {
   return {
-    definePartsStyle(config39) {
-      return config39;
+    definePartsStyle(config41) {
+      return config41;
     },
-    defineMultiStyleConfig(config39) {
-      return { parts: parts16, ...config39 };
+    defineMultiStyleConfig(config41) {
+      return { parts: parts18, ...config41 };
     }
   };
 }
@@ -6439,7 +6329,7 @@ function anatomy(name, map = {}) {
       "[anatomy] .part(...) should only be called once. Did you mean to use .extend(...) ?"
     );
   }
-  function parts16(...values) {
+  function parts18(...values) {
     assert();
     for (const part of values) {
       map[part] = toPart(part);
@@ -6479,7 +6369,7 @@ function anatomy(name, map = {}) {
   }
   const __type = {};
   return {
-    parts: parts16,
+    parts: parts18,
     toPart,
     extend,
     selectors,
@@ -8890,26 +8780,26 @@ var variantSolid2 = defineStyle((props) => {
   var _a6;
   const { colorScheme: c } = props;
   if (c === "gray") {
-    const bg2 = mode(`gray.100`, `whiteAlpha.200`)(props);
+    const bg22 = mode(`gray.100`, `whiteAlpha.200`)(props);
     return {
-      bg: bg2,
+      bg: bg22,
       color: mode(`gray.800`, `whiteAlpha.900`)(props),
       _hover: {
         bg: mode(`gray.200`, `whiteAlpha.300`)(props),
         _disabled: {
-          bg: bg2
+          bg: bg22
         }
       },
       _active: { bg: mode(`gray.300`, `whiteAlpha.400`)(props) }
     };
   }
   const {
-    bg = `${c}.500`,
+    bg: bg2 = `${c}.500`,
     color: color2 = "white",
     hoverBg = `${c}.600`,
     activeBg = `${c}.700`
   } = (_a6 = accessibleColorMap[c]) != null ? _a6 : {};
-  const background2 = mode(bg, `${c}.200`)(props);
+  const background2 = mode(bg2, `${c}.200`)(props);
   return {
     bg: background2,
     color: mode(color2, `gray.800`)(props),
@@ -9269,28 +9159,28 @@ function getBg(props) {
 }
 var variantSubtle2 = definePartsStyle25((props) => {
   const { colorScheme: c } = props;
-  const bg = getBg(props);
+  const bg2 = getBg(props);
   return {
     container: {
       [$fg6.variable]: `colors.${c}.600`,
-      [$bg15.variable]: bg.light,
+      [$bg15.variable]: bg2.light,
       _dark: {
         [$fg6.variable]: `colors.${c}.200`,
-        [$bg15.variable]: bg.dark
+        [$bg15.variable]: bg2.dark
       }
     }
   };
 });
 var variantLeftAccent = definePartsStyle25((props) => {
   const { colorScheme: c } = props;
-  const bg = getBg(props);
+  const bg2 = getBg(props);
   return {
     container: {
       [$fg6.variable]: `colors.${c}.600`,
-      [$bg15.variable]: bg.light,
+      [$bg15.variable]: bg2.light,
       _dark: {
         [$fg6.variable]: `colors.${c}.200`,
-        [$bg15.variable]: bg.dark
+        [$bg15.variable]: bg2.dark
       },
       paddingStart: "3",
       borderStartWidth: "4px",
@@ -9300,14 +9190,14 @@ var variantLeftAccent = definePartsStyle25((props) => {
 });
 var variantTopAccent = definePartsStyle25((props) => {
   const { colorScheme: c } = props;
-  const bg = getBg(props);
+  const bg2 = getBg(props);
   return {
     container: {
       [$fg6.variable]: `colors.${c}.600`,
-      [$bg15.variable]: bg.light,
+      [$bg15.variable]: bg2.light,
       _dark: {
         [$fg6.variable]: `colors.${c}.200`,
-        [$bg15.variable]: bg.dark
+        [$bg15.variable]: bg2.dark
       },
       pt: "2",
       borderTopWidth: "4px",
@@ -9370,8 +9260,8 @@ var baseStyleExcessLabel = defineStyle({
 });
 var baseStyleContainer5 = defineStyle((props) => {
   const { name, theme: theme3 } = props;
-  const bg = name ? randomColor({ string: name }) : "colors.gray.400";
-  const isBgDark = isDark(bg)(theme3);
+  const bg2 = name ? randomColor({ string: name }) : "colors.gray.400";
+  const isBgDark = isDark(bg2)(theme3);
   let color2 = "white";
   if (!isBgDark)
     color2 = "gray.800";
@@ -9384,7 +9274,7 @@ var baseStyleContainer5 = defineStyle((props) => {
     width: $size5.reference,
     height: $size5.reference,
     "&:not([data-loaded])": {
-      [$bg16.variable]: bg
+      [$bg16.variable]: bg2
     },
     [$border4.variable]: "colors.white",
     _dark: {
@@ -9558,7 +9448,9 @@ __export(components_exports, {
   ListBox: () => listbox_default,
   MediaControllerButton: () => media_controller_button_default,
   Modal: () => modal_default,
+  NumericStepper: () => numeric_stepper_default,
   Popover: () => popover_default,
+  ProgressBar: () => progress_bar_default,
   ProgressIndicator: () => progress_indicator_default,
   Radio: () => radio_default,
   Select: () => select_default,
@@ -9571,598 +9463,250 @@ __export(components_exports, {
   Toast: () => toast_default,
   TravelTag: () => travel_tag_default
 });
-
-// src/theme/foundations/index.ts
-var foundations_exports = {};
-__export(foundations_exports, {
-  borders: () => borders2,
-  breakpoints: () => breakpoints2,
-  colors: () => colors,
-  config: () => config2,
-  fontSizes: () => fontSizes,
-  fontWeights: () => fontWeights,
-  fonts: () => fonts,
-  lineHeights: () => lineHeights,
-  radii: () => radii2,
-  shadows: () => shadows,
-  sizes: () => sizes24,
-  space: () => space2,
-  spacing: () => spacing2,
-  styles: () => styles2,
-  textStyles: () => textStyles,
-  zIndices: () => zIndices2
+function brandBackground(state2, props) {
+  switch (state2) {
+    case "active":
+      return {
+        backgroundColor: mode(
+          "brand.surface.active.light",
+          "brand.surface.active.dark"
+        )(props)
+      };
+    case "hover":
+      return {
+        backgroundColor: mode(
+          "brand.surface.hover.light",
+          "brand.surface.hover.dark"
+        )(props)
+      };
+    case "default":
+    default:
+      return {
+        backgroundColor: mode(
+          "brand.surface.default.light",
+          "brand.surface.default.dark"
+        )(props)
+      };
+  }
+}
+function brandText(state2, props) {
+  return {
+    color: mode("brand.text.light", "brand.text.dark")(props)
+  };
+}
+var focusVisibleStyles = (props) => ({
+  _focusVisible: {
+    outlineWidth: "2px",
+    outlineColor: mode("outline.focus.light", "outline.focus.dark")(props),
+    outlineStyle: "solid",
+    outlineOffset: "1px"
+  }
 });
-var borders2 = {
-  none: "0",
-  sm: `${tokens10__default.size.stroke.sm} solid`,
-  "sm-dashed": `${tokens10__default.size.stroke.sm} dashed`,
-  md: `${tokens10__default.size.stroke.md} solid`,
-  "md-dashed": `${tokens10__default.size.stroke.md} dashed`,
-  lg: `${tokens10__default.size.stroke.lg} solid`,
-  "lg-dashed": `${tokens10__default.size.stroke.lg} dashed`
-};
-var breakpoints2 = {
-  base: "0px",
-  sm: tokens10__default.size.breakpoint.sm,
-  md: tokens10__default.size.breakpoint.md,
-  lg: tokens10__default.size.breakpoint.lg,
-  xl: tokens10__default.size.breakpoint.xl,
-  "2xl": tokens10__default.size.breakpoint.xl
-};
-
-// src/theme/foundations/config.ts
-var config2 = {
-  cssVarPrefix: "spor",
-  initialColorMode: "light",
-  useSystemColorMode: false
-};
-var fonts = {
-  body: `${tokens10__default.font.family.body}, sans-serif`,
-  heading: `${tokens10__default.font.family.heading}, sans-serif`,
-  mono: `${tokens10__default.font.family.monospace}, monospace`
-};
-var fontSizes = {
-  "2xs": tokens10__default.size.font.xs.mobile,
-  xs: tokens10__default.size.font.sm.mobile,
-  sm: tokens10__default.size.font.md.mobile,
-  md: tokens10__default.size.font.lg.mobile,
-  lg: tokens10__default.size.font.xl.mobile,
-  xl: tokens10__default.size.font.xxl.mobile,
-  "2xl": tokens10__default.size.font.xl.desktop,
-  "3xl": tokens10__default.size.font.xxl.desktop,
-  mobile: {
-    xs: tokens10__default.size.font.xs.mobile,
-    sm: tokens10__default.size.font.sm.mobile,
-    md: tokens10__default.size.font.md.mobile,
-    lg: tokens10__default.size.font.lg.mobile,
-    xl: tokens10__default.size.font.xl.mobile,
-    xxl: tokens10__default.size.font.xxl.mobile
-  },
-  desktop: {
-    xs: tokens10__default.size.font.xs.desktop,
-    sm: tokens10__default.size.font.sm.desktop,
-    md: tokens10__default.size.font.md.desktop,
-    lg: tokens10__default.size.font.lg.desktop,
-    xl: tokens10__default.size.font.xl.desktop,
-    xxl: tokens10__default.size.font.xxl.desktop
+var surface = (surface2, props) => {
+  switch (surface2) {
+    case "default":
+      return {
+        backgroundColor: mode(
+          "surface.default.light",
+          "surface.default.dark"
+        )(props)
+      };
+    case "secondary":
+      return {
+        backgroundColor: mode(
+          "surface.secondary.light",
+          "surface.secondary.dark"
+        )(props)
+      };
+    case "tertiary":
+      return {
+        backgroundColor: mode(
+          "surface.tertiary.light",
+          "surface.tertiary.dark"
+        )(props)
+      };
+    case "disabled":
+      return {
+        backgroundColor: mode(
+          "surface.disabled.light",
+          "surface.disabled.dark"
+        )(props)
+      };
   }
 };
 
-// src/theme/foundations/fontWeights.ts
-var fontWeights = {
-  light: 300,
-  medium: 400,
-  bold: 700
-};
-var lineHeights = {
-  base: tokens10__default.font.style.lg["line-height"],
-  normal: tokens10__default.font.style.lg["line-height"]
-};
-var radii2 = {
-  none: tokens10__default.size["border-radius"].none,
-  xs: tokens10__default.size["border-radius"].xs,
-  sm: tokens10__default.size["border-radius"].sm,
-  md: tokens10__default.size["border-radius"].md,
-  lg: tokens10__default.size["border-radius"].lg,
-  xl: tokens10__default.size["border-radius"].xl,
-  "2xl": tokens10__default.size["border-radius"]["2xl"],
-  round: "50%"
-};
-var spacing2 = Object.entries(tokens10__default.size.spacing).reduce(
-  (tokens14, [key, token]) => ({
-    ...tokens14,
-    [Number(key)]: token
-  }),
-  {}
-);
-var space2 = spacing2;
-
-// src/theme/foundations/sizes.ts
-var largeSizes2 = {
-  max: "max-content",
-  min: "min-content",
-  full: "100%",
-  "3xs": "14rem",
-  "2xs": "16rem",
-  xs: "20rem",
-  sm: "24rem",
-  md: "28rem",
-  lg: "32rem",
-  xl: "36rem",
-  "2xl": "42rem",
-  "3xl": "48rem",
-  "4xl": "56rem",
-  "5xl": "64rem",
-  "6xl": "72rem",
-  "7xl": "80rem",
-  "8xl": "90rem"
-};
-var container2 = {
-  sm: "640px",
-  md: "768px",
-  lg: "1024px",
-  xl: "1280px"
-};
-var sizes24 = {
-  ...spacing2,
-  ...largeSizes2,
-  container: container2
-};
-var textStyles = {
-  "2xl": {
-    fontSize: [
-      tokens10__default.font.style.xxl["font-size"].mobile,
-      null,
-      null,
-      tokens10__default.font.style.xxl["font-size"].desktop
-    ],
-    fontFamily: tokens10__default.font.style.xxl["font-family"],
-    lineHeight: tokens10__default.font.style.xxl["line-height"]
-  },
-  "xl-display": {
-    fontSize: [
-      tokens10__default.font.style["xl-display"]["font-size"].mobile,
-      null,
-      null,
-      tokens10__default.font.style["xl-display"]["font-size"].desktop
-    ],
-    fontFamily: tokens10__default.font.style["xl-display"]["font-family"],
-    lineHeight: tokens10__default.font.style["xl-display"]["line-height"]
-  },
-  "xl-sans": {
-    fontSize: [
-      tokens10__default.font.style["xl-sans"]["font-size"].mobile,
-      null,
-      null,
-      tokens10__default.font.style["xl-sans"]["font-size"].desktop
-    ],
-    fontFamily: tokens10__default.font.style["xl-sans"]["font-family"],
-    lineHeight: tokens10__default.font.style["xl-sans"]["line-height"]
-  },
-  lg: {
-    fontSize: [
-      tokens10__default.font.style.lg["font-size"].mobile,
-      null,
-      null,
-      tokens10__default.font.style.lg["font-size"].desktop
-    ],
-    fontFamily: tokens10__default.font.style.lg["font-family"],
-    lineHeight: tokens10__default.font.style.lg["line-height"]
-  },
-  md: {
-    fontSize: [
-      tokens10__default.font.style.md["font-size"].mobile,
-      null,
-      null,
-      tokens10__default.font.style.md["font-size"].desktop
-    ],
-    fontFamily: tokens10__default.font.style.md["font-family"],
-    lineHeight: tokens10__default.font.style.md["line-height"]
-  },
-  sm: {
-    fontSize: [
-      tokens10__default.font.style.sm["font-size"].mobile,
-      null,
-      null,
-      tokens10__default.font.style.sm["font-size"].desktop
-    ],
-    fontFamily: tokens10__default.font.style.sm["font-family"],
-    lineHeight: tokens10__default.font.style.sm["line-height"]
-  },
-  xs: {
-    fontSize: [
-      tokens10__default.font.style.xs["font-size"].mobile,
-      null,
-      null,
-      tokens10__default.font.style.xs["font-size"].desktop
-    ],
-    fontFamily: tokens10__default.font.style.xs["font-family"],
-    lineHeight: tokens10__default.font.style.xs["line-height"]
-  }
-};
-var zIndices2 = {
-  hide: tokens10__default.depth["z-index"].hide,
-  auto: "auto",
-  base: tokens10__default.depth["z-index"].base,
-  docked: tokens10__default.depth["z-index"].docked,
-  dropdown: tokens10__default.depth["z-index"].dropdown,
-  sticky: tokens10__default.depth["z-index"].sticky,
-  banner: tokens10__default.depth["z-index"].banner,
-  overlay: tokens10__default.depth["z-index"].overlay,
-  modal: tokens10__default.depth["z-index"].modal,
-  popover: tokens10__default.depth["z-index"].popover,
-  skipLink: tokens10__default.depth["z-index"].skipLink,
-  toast: tokens10__default.depth["z-index"].toast,
-  tooltip: tokens10__default.depth["z-index"].tooltip
-};
-var styles2 = {
-  global: (props) => ({
-    "html, body": {
-      color: mode("darkGrey", "lightGrey")(props)
-    },
-    svg: {
-      display: "initial"
-    }
-  })
-};
-
-// src/theme/utils/background-utils.ts
+// src/theme/utils/base-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("blackAlpha.100", "whiteAlpha.100")(props)
-      };
-    case "hover":
-      return {
-        backgroundColor: "transparent"
-      };
-    default:
-      return {
-        backgroundColor: "transparent"
-      };
-  }
-}
-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%)`
+          "base.surface.active.light",
+          "base.surface.active.dark"
         )(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)
-      };
+      return brandBackground("default", props);
+    case "disabled":
+      return surface("disabled", props);
     case "hover":
-      return {
-        backgroundColor: mode("darkTeal", "blueGreen")(props)
-      };
-    case "focus":
-    case "default":
     default:
-      return {
-        backgroundColor: mode("pine", "coralGreen")(props)
-      };
+      return surface("default", props);
   }
 }
 function baseBorder(state2, props) {
   switch (state2) {
     case "hover":
       return {
-        boxShadow: getBoxShadowString({
-          borderColor: mode("darkGrey", "white")(props),
-          borderWidth: 2
-        })
+        outline: "2px solid",
+        outlineColor: mode(
+          "base.outline.hover.light",
+          "base.outline.hover.dark"
+        )(props)
       };
     case "focus": {
-      return {
-        boxShadow: getBoxShadowString({
-          borderColor: mode("greenHaze", "azure")(props),
-          borderWidth: 2
-        })
-      };
+      return focusVisibleStyles(props)._focusVisible;
     }
     case "disabled": {
       return {
-        boxShadow: getBoxShadowString({
-          borderColor: mode("platinum", "whiteAlpha.400")(props)
-        })
+        outline: "1px solid",
+        outlineColor: mode(
+          "outline.disabled.light",
+          "outline.disabled.dark"
+        )(props)
       };
     }
-    case "selected":
-      return {
-        boxShadow: getBoxShadowString({
-          borderColor: mode("greenHaze", "azure")(props)
-        })
-      };
     case "invalid": {
       return {
-        boxShadow: getBoxShadowString({
-          borderColor: "brightRed",
-          borderWidth: 2
-        })
+        outline: "2px solid",
+        outlineColor: mode("outline.error.light", "outline.error.dark")(props)
       };
     }
     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"
-        })
+        outline: "1px solid",
+        outlineColor: mode(
+          "base.outline.default.light",
+          "base.outline.default.dark"
+        )(props)
       };
   }
 }
-function accentBorder(state2, props) {
+function baseText(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
-        })
+        color: mode("brand.text.light", "brand.text.dark")(props)
       };
-    case "hover":
+    case "disabled":
       return {
-        boxShadow: getBoxShadowString({
-          borderColor: mode("coralGreen", "greenHaze")(props),
-          borderWidth: 2
-        })
+        color: mode("text.disabled.light", "text.disabled.dark")(props)
       };
-    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
-        })
+        color: mode("base.text.light", "base.text.dark")(props)
       };
   }
 }
-function brandBorder(state2, props) {
+function floatingBackground(state2, props) {
   switch (state2) {
     case "selected":
+      return brandBackground("default", props);
     case "active":
       return {
-        boxShadow: getBoxShadowString({
-          borderColor: mode("greenHaze", "seaMist")(props),
-          borderWidth: 2
-        })
+        backgroundColor: mode(
+          "floating.surface.active.light",
+          "floating.surface.active.dark"
+        )(props)
       };
     case "hover":
       return {
-        boxShadow: getBoxShadowString({
-          borderColor: mode("darkTeal", "blueGreen")(props),
-          borderWidth: 2
-        })
+        backgroundColor: mode(
+          "floating.surface.hover.light",
+          "floating.surface.hover.dark"
+        )(props)
       };
-    case "focus":
     case "default":
-    default:
       return {
-        boxShadow: getBoxShadowString({
-          borderColor: mode("pine", "coralGreen")(props),
-          borderWidth: 2
-        })
+        backgroundColor: mode(
+          "floating.surface.default.light",
+          "floating.surface.default.dark"
+        )(props)
       };
   }
 }
-var focusVisibleStyles = (props) => ({
-  _focusVisible: {
-    outlineWidth: "2px",
-    outlineColor: mode("greenHaze", "azure")(props),
-    outlineStyle: "solid",
-    outlineOffset: "1px"
-  }
-});
-function baseText(state2, props) {
+function floatingBorder(state2, props) {
   switch (state2) {
-    case "selected":
-      return {
-        color: mode("white", "darkTeal")(props)
-      };
-    case "disabled":
+    case "hover":
       return {
-        color: mode(
-          "white",
-          `color-mix(in srgb, ${props.theme.colors.accent}, ${colors.white} 40%)`
+        outline: "1px solid",
+        outlineColor: mode(
+          "floating.outline.hover.light",
+          "floating.outline.hover.dark"
         )(props)
       };
     default:
       return {
-        color: mode("darkGrey", "white")(props)
+        outline: "1px solid",
+        outlineColor: mode(
+          "floating.outline.default.light",
+          "floating.outline.default.dark"
+        )(props)
       };
   }
 }
-function accentText(state2, props) {
+function ghostBackground(state2, props) {
   switch (state2) {
-    case "selected":
-      return {
-        color: mode("white", "darkTeal")(props)
-      };
-    case "default":
-    default:
+    case "hover": {
       return {
-        color: mode("darkTeal", "seaMist")(props)
+        backgroundColor: mode(
+          "ghost.surface.hover.light",
+          "ghost.surface.hover.dark"
+        )(props)
       };
-  }
-}
-function brandText(state2, props) {
-  switch (state2) {
-    case "hover":
+    }
+    case "active":
       return {
-        color: mode("white", "darkTeal")(props)
+        backgroundColor: mode(
+          "ghost.surface.active.light",
+          "ghost.surface.active.dark"
+        )(props)
       };
-    case "active":
+    case "selected": {
       return {
-        color: mode("white", "darkTeal")(props)
+        backgroundColor: mode("mint", "whiteAlpha.200")(props)
       };
+    }
     case "default":
-    default:
       return {
-        color: mode("pine", "coralGreen")(props)
+        backgroundColor: "transparent"
       };
   }
 }
 
 // src/theme/components/accordion.ts
 var helpers = createMultiStyleConfigHelpers(accordionAnatomy.keys);
-var config3 = helpers.defineMultiStyleConfig({
+var config2 = helpers.defineMultiStyleConfig({
   baseStyle: (props) => ({
     container: {
-      border: "none",
       borderRadius: "sm"
     },
     button: {
       transitionProperty: "background-color, color, border-radius, box-shadow, opacity",
-      transitionDuration: "normal",
-      border: "none",
+      transitionDuration: "fast",
       borderRadius: "sm",
-      borderColor: "osloGrey",
       display: "flex",
       justifyContent: "space-between",
       ...baseText("default", props),
       textAlign: "left",
       fontFamily: "body",
       fontWeight: "bold",
+      outlineOffset: "-2px",
       ...focusVisibleStyles(props),
       _disabled: {
-        opacity: 0.4,
-        cursor: "not-allowed"
+        pointerEvents: "none",
+        opacity: 0.4
       }
     },
     panel: {
@@ -10176,7 +9720,6 @@ var config3 = helpers.defineMultiStyleConfig({
   variants: {
     ghost: (props) => ({
       button: {
-        boxShadow: "none",
         _hover: {
           ...ghostBackground("hover", props)
         },
@@ -10194,7 +9737,8 @@ var config3 = helpers.defineMultiStyleConfig({
           borderBottomRadius: "none"
         },
         _hover: {
-          ...baseBorder("hover", props)
+          ...baseBorder("hover", props),
+          outlineOffset: 0
         },
         _active: {
           ...baseBackground("active", props),
@@ -10205,15 +9749,17 @@ var config3 = helpers.defineMultiStyleConfig({
     floating: (props) => ({
       container: {
         ...floatingBackground("default", props),
-        ...floatingBorder("default", props)
+        ...floatingBorder("default", props),
+        boxShadow: "sm"
       },
       button: {
         _expanded: {
           borderBottomRadius: "none"
         },
         _hover: {
-          ...ghostBackground("hover", props),
-          ...floatingBorder("default", props)
+          ...floatingBackground("hover", props),
+          ...floatingBorder("hover", props),
+          outlineOffset: 1
         },
         _active: {
           ...ghostBackground("active", props),
@@ -10265,12 +9811,12 @@ var config3 = helpers.defineMultiStyleConfig({
     size: "sm"
   }
 });
-var accordion_default = config3;
+var accordion_default = config2;
 
 // src/theme/components/alert.ts
 var parts = anatomy("alert").parts("container", "icon", "closeButton");
 var helpers2 = createMultiStyleConfigHelpers(parts.keys);
-var config4 = helpers2.defineMultiStyleConfig({
+var config3 = helpers2.defineMultiStyleConfig({
   baseStyle: {
     container: {
       borderRadius: "sm",
@@ -10321,7 +9867,84 @@ var config4 = helpers2.defineMultiStyleConfig({
     variant: "info"
   }
 });
-var alert_default = config4;
+var alert_default = config3;
+
+// src/theme/components/alert-expandable.ts
+var parts2 = anatomy("alertExpandable").parts("container");
+var helpers3 = createMultiStyleConfigHelpers(parts2.keys);
+var config4 = helpers3.defineMultiStyleConfig({
+  baseStyle: {
+    container: {
+      paddingX: 3,
+      paddingY: 2,
+      fontSize: "inherit",
+      transitionProperty: "outline, border-radius",
+      transitionDuration: "fast",
+      _expanded: {
+        borderBottomRadius: "none"
+      },
+      _hover: {
+        outline: "2px solid"
+      }
+    }
+  },
+  variants: {
+    info: {
+      container: {
+        _hover: {
+          outlineColor: "sky"
+        },
+        _active: {
+          backgroundColor: "icyBlue"
+        }
+      }
+    },
+    success: {
+      container: {
+        _hover: {
+          outlineColor: "blueGreen"
+        },
+        _active: {
+          backgroundColor: "mint"
+        }
+      }
+    },
+    warning: {
+      container: {
+        _hover: {
+          outlineColor: "sunshine"
+        },
+        _active: {
+          backgroundColor: "cornSilk"
+        }
+      }
+    },
+    "alt-transport": {
+      container: {
+        _hover: {
+          outlineColor: "golden"
+        },
+        _active: {
+          backgroundColor: "sunshine"
+        }
+      }
+    },
+    error: {
+      container: {
+        _hover: {
+          outlineColor: "apricot"
+        },
+        _active: {
+          backgroundColor: "pink"
+        }
+      }
+    }
+  },
+  defaultProps: {
+    variant: "info"
+  }
+});
+var alert_expandable_default = config4;
 var config5 = defineStyleConfig$1({
   baseStyle: ({ colorScheme }) => ({
     borderStyle: "solid",
@@ -10423,24 +10046,119 @@ var baseStyleLink2 = defineStyle((props) => ({
   "&:not([aria-current=page])": {
     cursor: "pointer",
     _hover: {
-      backgroundColor: mode("seaMist", "pine")(props)
+      ...baseBackground("hover", props)
     },
-    ...focusVisibleStyles(props),
     _active: {
-      backgroundColor: mode("mint", "whiteAlpha.200")(props)
-    }
+      ...baseBackground("active", props)
+    },
+    ...focusVisibleStyles(props)
   }
 }));
-var baseStyle43 = definePartsStyle27((props) => ({
+definePartsStyle27((props) => ({
   link: baseStyleLink2(props),
   list: {
     flexWrap: "wrap",
     alignItems: "flex-start"
   }
-}));
-var breadcrumb_default = defineMultiStyleConfig27({
-  baseStyle: baseStyle43
+}));
+var breadcrumb_default = defineMultiStyleConfig27({
+  baseStyle: definePartsStyle27((props) => ({
+    link: {
+      transitionProperty: "common",
+      transitionDuration: "fast",
+      transitionTimingFunction: "ease-out",
+      color: "inherit",
+      textDecoration: "none",
+      textStyle: "xs",
+      paddingX: 0.5,
+      borderRadius: "xs",
+      "&:not([aria-current=page])": {
+        cursor: "pointer",
+        ...focusVisibleStyles(props)
+      }
+    },
+    list: {
+      flexWrap: "wrap",
+      alignItems: "flex-start"
+    }
+  })),
+  variants: {
+    base: (props) => ({
+      link: {
+        "&:not([aria-current=page])": {
+          _hover: {
+            ...baseBorder("default", props)
+          },
+          _active: {
+            ...baseBackground("active", props)
+          }
+        }
+      }
+    }),
+    ghost: (props) => ({
+      link: {
+        "&:not([aria-current=page])": {
+          _hover: {
+            backgroundColor: mode(
+              "ghost.surface.hover.light",
+              "ghost.surface.hover.dark"
+            )(props)
+          },
+          _active: {
+            backgroundColor: mode(
+              "ghost.surface.active.light",
+              "ghost.surface.active.dark"
+            )(props)
+          }
+        }
+      }
+    })
+  },
+  defaultProps: {
+    variant: "base"
+  }
 });
+function accentBackground(state2, props) {
+  switch (state2) {
+    case "selected":
+      return brandBackground("default", props);
+    case "active":
+      return {
+        backgroundColor: mode(
+          "accent.surface.active.light",
+          "accent.surface.active.dark"
+        )(props)
+      };
+    case "hover":
+      return {
+        backgroundColor: mode(
+          "accent.surface.hover.light",
+          "accent.surface.hover.dark"
+        )(props)
+      };
+    default:
+      return {
+        backgroundColor: mode(
+          "accent.surface.default.light",
+          "accent.surface.default.dark"
+        )(props)
+      };
+  }
+}
+function accentText(state2, props) {
+  switch (state2) {
+    case "selected":
+      return {
+        color: mode("brand.text.light", "brand.text.dark")(props)
+      };
+    default:
+      return {
+        color: mode("accent.text.light", "accent.text.dark")(props)
+      };
+  }
+}
+
+// src/theme/components/button.ts
 var config6 = defineStyleConfig$1({
   baseStyle: (props) => ({
     border: 0,
@@ -10453,111 +10171,74 @@ var config6 = defineStyleConfig$1({
     textWrap: "wrap",
     paddingX: 3,
     paddingY: 1,
-    _focus: {
-      boxShadow: 0,
-      outline: 0
-    },
     ...focusVisibleStyles(props),
     _disabled: {
       cursor: "not-allowed",
+      pointerEvents: "none",
       boxShadow: "none",
-      backgroundColor: mode("blackAlpha.100", "whiteAlpha.100")(props),
-      color: mode("blackAlpha.400", "whiteAlpha.400")(props)
-    },
-    _hover: {
-      _disabled: {
-        background: mode("blackAlpha.100", "whiteAlpha.100")(props)
-      }
+      ...surface("disabled", props),
+      ...baseText("disabled", props)
     }
   }),
   variants: {
     primary: (props) => ({
-      // FIXME: Update to use a global defined background color for darkMode whenever it is available.
-      // hardcoded background color as alpha-"hack" below is not feasible for dark mode with solid background color
-      backgroundColor: mode("pine", "coralGreen")(props),
-      color: mode("white", "darkTeal")(props),
+      ...brandBackground("default", props),
+      ...brandText("default", props),
       _hover: {
-        backgroundColor: mode("darkTeal", "blueGreen")(props)
+        ...brandBackground("hover", props)
       },
       _active: {
-        backgroundColor: mode("greenHaze", "seaMist")(props)
+        ...brandBackground("active", props)
       }
     }),
     secondary: (props) => ({
-      // FIXME: Update to use global defined background color for darkMode whenever it is available instead of alpha
-      backgroundColor: mode("seaMist", "primaryGreen")(props),
-      color: mode("darkTeal", "seaMist")(props),
-      // order is important here for now while we do not have global defined background color for darkMode
+      ...accentBackground("default", props),
+      ...accentText("default", props),
       _hover: {
-        backgroundColor: mode("coralGreen", "greenHaze")(props)
+        ...accentBackground("hover", props)
       },
       _active: {
-        backgroundColor: mode("mint", "darkTeal")(props),
-        boxShadow: `inset 0 0 0 2px ${mode(
-          colors.greenHaze,
-          colors.azure
-        )(props)}, inset 0 0 0 4px ${mode(
-          colors.white,
-          colors.blackAlpha[600]
-        )(props)}`,
-        _hover: {
-          boxShadow: `inset 0 0 0 2px ${mode(
-            colors.greenHaze,
-            colors.azure
-          )(props)}, inset 0 0 0 4px ${mode(
-            colors.white,
-            colors.blackAlpha[600]
-          )(props)}`
-        }
+        ...accentBackground("active", props)
       }
     }),
     tertiary: (props) => ({
-      backgroundColor: "transparent",
-      color: mode("darkGrey", "white")(props),
-      boxShadow: `inset 0 0 0 1px ${mode(
-        colors.blackAlpha[400],
-        colors.whiteAlpha[400]
-      )(props)}`,
+      ...baseBackground("default", props),
+      ...baseText("default", props),
+      ...baseBorder("default", props),
       _hover: {
-        boxShadow: `inset 0 0 0 2px currentColor`
+        ...baseBorder("hover", props)
       },
       _active: {
-        boxShadow: `inset 0 0 0 1px ${mode(
-          colors.blackAlpha[400],
-          colors.whiteAlpha[300]
-        )(props)}`,
-        backgroundColor: mode("mint", "whiteAlpha.200")(props)
+        ...baseBorder("default", props),
+        // We want a
+        ...baseBackground("active", props)
       }
     }),
     ghost: (props) => ({
-      backgroundColor: "transparent",
-      color: mode("darkGrey", "white")(props),
+      ...ghostBackground("default", props),
+      ...baseText("default", props),
       _hover: {
-        backgroundColor: mode("seaMist", "whiteAlpha.200")(props),
+        ...ghostBackground("hover", props),
         _disabled: {
-          color: "blackAlpha.300"
+          ...baseText("disabled", props)
         }
       },
       _active: {
-        backgroundColor: mode("mint", "whiteAlpha.100")(props)
+        ...ghostBackground("active", props)
       }
     }),
     floating: (props) => ({
-      backgroundColor: mode("white", "whiteAlpha.100")(props),
-      boxShadow: getBoxShadowString({
-        borderColor: mode("grey.200", "whiteAlpha.400")(props),
-        baseShadow: "sm"
-      }),
-      _active: {
-        backgroundColor: mode("mint", "whiteAlpha.400")(props)
-      },
+      ...floatingBackground("default", props),
+      ...floatingBorder("default", props),
+      boxShadow: "sm",
       _hover: {
-        backgroundColor: mode("white", "whiteAlpha.200")(props),
-        boxShadow: getBoxShadowString({
-          borderColor: mode("grey.300", "white")(props),
-          baseShadow: "md",
-          borderWidth: 2
-        })
+        ...floatingBackground("hover", props),
+        ...floatingBorder("hover", props),
+        boxShadow: "md"
+      },
+      _active: {
+        ...floatingBackground("active", props),
+        boxShadow: "sm"
       }
     })
   },
@@ -10583,17 +10264,266 @@ var config6 = defineStyleConfig$1({
     xs: {
       minHeight: 5,
       minWidth: 5,
+      paddingY: 0.5,
       fontSize: "16px",
       fontWeight: "normal"
     }
   },
-  defaultProps: {
-    variant: "primary",
-    size: "md"
+  defaultProps: {
+    variant: "primary",
+    size: "md"
+  }
+});
+var button_default = config6;
+
+// src/theme/foundations/index.ts
+var foundations_exports = {};
+__export(foundations_exports, {
+  borders: () => borders2,
+  breakpoints: () => breakpoints2,
+  colors: () => colors2,
+  config: () => config7,
+  fontSizes: () => fontSizes,
+  fontWeights: () => fontWeights,
+  fonts: () => fonts,
+  lineHeights: () => lineHeights,
+  radii: () => radii2,
+  shadows: () => shadows2,
+  sizes: () => sizes24,
+  space: () => space2,
+  spacing: () => spacing2,
+  styles: () => styles2,
+  textStyles: () => textStyles,
+  zIndices: () => zIndices2
+});
+var borders2 = {
+  none: "0",
+  sm: `${tokens10__default.size.stroke.sm} solid`,
+  "sm-dashed": `${tokens10__default.size.stroke.sm} dashed`,
+  md: `${tokens10__default.size.stroke.md} solid`,
+  "md-dashed": `${tokens10__default.size.stroke.md} dashed`,
+  lg: `${tokens10__default.size.stroke.lg} solid`,
+  "lg-dashed": `${tokens10__default.size.stroke.lg} dashed`
+};
+var breakpoints2 = {
+  base: "0px",
+  sm: tokens10__default.size.breakpoint.sm,
+  md: tokens10__default.size.breakpoint.md,
+  lg: tokens10__default.size.breakpoint.lg,
+  xl: tokens10__default.size.breakpoint.xl,
+  "2xl": tokens10__default.size.breakpoint.xl
+};
+var colors2 = {
+  ...tokens10__default.color.alias,
+  ...tokens10__default.color.palette,
+  ...tokens10__default.color.vyDigital,
+  linjetag: tokens10__default.color.linjetag
+};
+
+// src/theme/foundations/config.ts
+var config7 = {
+  cssVarPrefix: "spor",
+  initialColorMode: "light",
+  useSystemColorMode: false
+};
+var fonts = {
+  body: `${tokens10__default.font.family.body}, arial, sans-serif`,
+  heading: `${tokens10__default.font.family.heading}, arial, sans-serif`,
+  mono: `${tokens10__default.font.family.monospace}, monospace`
+};
+var fontSizes = {
+  "2xs": tokens10__default.size.font.xs.mobile,
+  xs: tokens10__default.size.font.sm.mobile,
+  sm: tokens10__default.size.font.md.mobile,
+  md: tokens10__default.size.font.lg.mobile,
+  lg: tokens10__default.size.font.xl.mobile,
+  xl: tokens10__default.size.font.xxl.mobile,
+  "2xl": tokens10__default.size.font.xl.desktop,
+  "3xl": tokens10__default.size.font.xxl.desktop,
+  mobile: {
+    xs: tokens10__default.size.font.xs.mobile,
+    sm: tokens10__default.size.font.sm.mobile,
+    md: tokens10__default.size.font.md.mobile,
+    lg: tokens10__default.size.font.lg.mobile,
+    xl: tokens10__default.size.font.xl.mobile,
+    xxl: tokens10__default.size.font.xxl.mobile
+  },
+  desktop: {
+    xs: tokens10__default.size.font.xs.desktop,
+    sm: tokens10__default.size.font.sm.desktop,
+    md: tokens10__default.size.font.md.desktop,
+    lg: tokens10__default.size.font.lg.desktop,
+    xl: tokens10__default.size.font.xl.desktop,
+    xxl: tokens10__default.size.font.xxl.desktop
+  }
+};
+
+// src/theme/foundations/fontWeights.ts
+var fontWeights = {
+  light: 300,
+  medium: 400,
+  bold: 700
+};
+var lineHeights = {
+  base: tokens10__default.font.style.lg["line-height"],
+  normal: tokens10__default.font.style.lg["line-height"]
+};
+var radii2 = {
+  none: tokens10__default.size["border-radius"].none,
+  xs: tokens10__default.size["border-radius"].xs,
+  sm: tokens10__default.size["border-radius"].sm,
+  md: tokens10__default.size["border-radius"].md,
+  lg: tokens10__default.size["border-radius"].lg,
+  xl: tokens10__default.size["border-radius"].xl,
+  "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,
+    [Number(key)]: token
+  }),
+  {}
+);
+var space2 = spacing2;
+
+// src/theme/foundations/sizes.ts
+var largeSizes2 = {
+  max: "max-content",
+  min: "min-content",
+  full: "100%",
+  "3xs": "14rem",
+  "2xs": "16rem",
+  xs: "20rem",
+  sm: "24rem",
+  md: "28rem",
+  lg: "32rem",
+  xl: "36rem",
+  "2xl": "42rem",
+  "3xl": "48rem",
+  "4xl": "56rem",
+  "5xl": "64rem",
+  "6xl": "72rem",
+  "7xl": "80rem",
+  "8xl": "90rem"
+};
+var container2 = {
+  sm: "640px",
+  md: "768px",
+  lg: "1024px",
+  xl: "1280px"
+};
+var sizes24 = {
+  ...spacing2,
+  ...largeSizes2,
+  container: container2
+};
+var textStyles = {
+  "2xl": {
+    fontSize: [
+      tokens10__default.font.style.xxl["font-size"].mobile,
+      null,
+      null,
+      tokens10__default.font.style.xxl["font-size"].desktop
+    ],
+    fontFamily: tokens10__default.font.style.xxl["font-family"],
+    lineHeight: tokens10__default.font.style.xxl["line-height"]
+  },
+  "xl-display": {
+    fontSize: [
+      tokens10__default.font.style["xl-display"]["font-size"].mobile,
+      null,
+      null,
+      tokens10__default.font.style["xl-display"]["font-size"].desktop
+    ],
+    fontFamily: tokens10__default.font.style["xl-display"]["font-family"],
+    lineHeight: tokens10__default.font.style["xl-display"]["line-height"]
+  },
+  "xl-sans": {
+    fontSize: [
+      tokens10__default.font.style["xl-sans"]["font-size"].mobile,
+      null,
+      null,
+      tokens10__default.font.style["xl-sans"]["font-size"].desktop
+    ],
+    fontFamily: tokens10__default.font.style["xl-sans"]["font-family"],
+    lineHeight: tokens10__default.font.style["xl-sans"]["line-height"]
+  },
+  lg: {
+    fontSize: [
+      tokens10__default.font.style.lg["font-size"].mobile,
+      null,
+      null,
+      tokens10__default.font.style.lg["font-size"].desktop
+    ],
+    fontFamily: tokens10__default.font.style.lg["font-family"],
+    lineHeight: tokens10__default.font.style.lg["line-height"]
+  },
+  md: {
+    fontSize: [
+      tokens10__default.font.style.md["font-size"].mobile,
+      null,
+      null,
+      tokens10__default.font.style.md["font-size"].desktop
+    ],
+    fontFamily: tokens10__default.font.style.md["font-family"],
+    lineHeight: tokens10__default.font.style.md["line-height"]
+  },
+  sm: {
+    fontSize: [
+      tokens10__default.font.style.sm["font-size"].mobile,
+      null,
+      null,
+      tokens10__default.font.style.sm["font-size"].desktop
+    ],
+    fontFamily: tokens10__default.font.style.sm["font-family"],
+    lineHeight: tokens10__default.font.style.sm["line-height"]
+  },
+  xs: {
+    fontSize: [
+      tokens10__default.font.style.xs["font-size"].mobile,
+      null,
+      null,
+      tokens10__default.font.style.xs["font-size"].desktop
+    ],
+    fontFamily: tokens10__default.font.style.xs["font-family"],
+    lineHeight: tokens10__default.font.style.xs["line-height"]
   }
-});
-var button_default = config6;
-var config7 = defineStyleConfig$1({
+};
+var zIndices2 = {
+  hide: tokens10__default.depth["z-index"].hide,
+  auto: "auto",
+  base: tokens10__default.depth["z-index"].base,
+  docked: tokens10__default.depth["z-index"].docked,
+  dropdown: tokens10__default.depth["z-index"].dropdown,
+  sticky: tokens10__default.depth["z-index"].sticky,
+  banner: tokens10__default.depth["z-index"].banner,
+  overlay: tokens10__default.depth["z-index"].overlay,
+  modal: tokens10__default.depth["z-index"].modal,
+  popover: tokens10__default.depth["z-index"].popover,
+  skipLink: tokens10__default.depth["z-index"].skipLink,
+  toast: tokens10__default.depth["z-index"].toast,
+  tooltip: tokens10__default.depth["z-index"].tooltip
+};
+var styles2 = {
+  global: (props) => ({
+    "html, body": {
+      color: mode("darkGrey", "lightGrey")(props)
+    },
+    svg: {
+      display: "initial"
+    }
+  })
+};
+
+// src/theme/components/card.ts
+var config8 = defineStyleConfig$1({
   baseStyle: (props) => ({
     appearance: "none",
     border: "none",
@@ -10603,38 +10533,58 @@ var config7 = defineStyleConfig$1({
     transitionProperty: "common",
     transitionDuration: "fast",
     borderRadius: "md",
+    // Except for white cards, all cards are light mode always
+    color: "text.default.light",
     ...getColorSchemeBaseProps(props),
     "button&, a&, label&, &.is-clickable": {
+      outline: "1px solid",
       ...getColorSchemeClickableProps(props),
-      _hover: getColorSchemeHoverProps(props),
       ...focusVisibleStyles(props),
+      _hover: getColorSchemeHoverProps(props),
       _active: getColorSchemeActiveProps(props),
       _disabled: {
-        backgroundColor: "platinum",
-        boxShadow: getBoxShadowString({
-          borderColor: "silver",
-          isInset: false
-        }),
-        color: "osloGrey",
+        ...baseBackground("disabled", props),
+        ...baseBorder("disabled", props),
+        ...baseText("disabled", props),
         pointerEvents: "none"
       }
     }
-  })
+  }),
+  sizes: {
+    sm: {
+      "button&, a&, label&, &.is-clickable": {
+        boxShadow: "sm",
+        _hover: {
+          boxShadow: "md"
+        },
+        _active: {
+          boxShadow: "none"
+        }
+      }
+    },
+    lg: {
+      "button&, a&, label&, &.is-clickable": {
+        boxShadow: "md",
+        _hover: {
+          boxShadow: "lg"
+        },
+        _active: {
+          boxShadow: "sm"
+        }
+      }
+    }
+  }
 });
-var card_default = config7;
+var card_default = config8;
 var getColorSchemeBaseProps = (props) => {
   var _a6;
-  const { colorScheme, size: size2 } = props;
-  const baseShadow = size2 === "lg" ? "md" : "sm";
-  switch (colorScheme) {
+  switch (props.colorScheme) {
     case "white":
       return {
+        outline: "1px solid",
+        outlineColor: "silver",
         backgroundColor: mode("white", "whiteAlpha.100")(props),
-        boxShadow: getBoxShadowString({
-          baseShadow,
-          borderColor: "silver",
-          isInset: false
-        })
+        color: "inherit"
       };
     case "grey":
       return {
@@ -10652,149 +10602,103 @@ var getColorSchemeBaseProps = (props) => {
     }
     default:
       return {
-        backgroundColor: ((_a6 = colors[colorScheme]) == null ? void 0 : _a6[100]) ?? "platinum"
+        backgroundColor: ((_a6 = colors2[props.colorScheme]) == null ? void 0 : _a6[100]) ?? "platinum"
       };
   }
 };
-function getColorSchemeClickableProps({ colorScheme, size: size2 }) {
+function getColorSchemeClickableProps(props) {
   var _a6, _b5;
-  const baseShadow = size2 === "lg" ? "md" : "sm";
-  switch (colorScheme) {
+  switch (props.colorScheme) {
     case "white":
       return {
-        boxShadow: getBoxShadowString({
-          baseShadow,
-          borderColor: "silver"
-        })
+        outlineColor: "silver"
       };
     case "grey":
       return {
-        boxShadow: getBoxShadowString({
-          baseShadow,
-          borderColor: "steel"
-        })
+        outlineColor: "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"
-        })
+        backgroundColor: ((_a6 = colors2[props.colorScheme]) == null ? void 0 : _a6[100]) ?? "platinum",
+        outlineColor: ((_b5 = colors2[props.colorScheme]) == null ? void 0 : _b5[200]) ?? "silver"
       };
   }
 }
 var getColorSchemeHoverProps = (props) => {
   var _a6, _b5;
-  const { colorScheme, size: size2 } = props;
-  const baseShadow = size2 === "lg" ? "lg" : "md";
-  switch (colorScheme) {
+  switch (props.colorScheme) {
     case "white":
       return {
         backgroundColor: mode("white", "whiteAlpha.200")(props),
-        boxShadow: getBoxShadowString({
-          baseShadow,
-          borderColor: colors.steel
-        })
+        outlineColor: "steel"
       };
     case "grey":
       return {
-        boxShadow: getBoxShadowString({
-          baseShadow,
-          borderColor: colors.osloGrey
-        })
+        outlineColor: "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
-        })
+        backgroundColor: ((_a6 = colors2[props.colorScheme]) == null ? void 0 : _a6[200]) ?? "silver",
+        outlineColor: ((_b5 = colors2[props.colorScheme]) == null ? void 0 : _b5[400]) ?? "silver"
       };
   }
 };
 var getColorSchemeActiveProps = (props) => {
   var _a6, _b5;
   const { colorScheme, 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
-        })
+        outlineColor: "silver"
       };
     case "grey":
       return {
         backgroundColor: "white",
-        boxShadow: getBoxShadowString({
-          baseShadow,
-          borderColor: colors.steel
-        })
+        outlineColor: "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
-        })
+        backgroundColor: ((_a6 = colors2[colorScheme]) == null ? void 0 : _a6[50]) ?? "lightGrey",
+        outlineColor: ((_b5 = colors2[colorScheme]) == null ? void 0 : _b5[100]) ?? "silver"
       };
   }
 };
-var parts2 = anatomy("card-select").parts("trigger", "card");
-var helpers3 = createMultiStyleConfigHelpers(parts2.keys);
-var config8 = helpers3.defineMultiStyleConfig({
+
+// src/theme/components/card-select.ts
+var parts3 = anatomy("card-select").parts("trigger", "card");
+var helpers4 = createMultiStyleConfigHelpers(parts3.keys);
+var config9 = helpers4.defineMultiStyleConfig({
   baseStyle: (props) => ({
     trigger: {
       appearance: "none",
       display: "flex",
       alignItems: "center",
+      transitionProperty: "outline",
+      transitionDuration: "fast",
       ...focusVisibleStyles(props)
     },
     card: {
       borderRadius: "sm",
       boxShadow: "md",
       padding: 3,
-      color: mode("darkGrey", "white")(props),
+      ...baseText("default", props),
       ...floatingBackground("default", props)
     }
   }),
   variants: {
     base: (props) => ({
       trigger: {
-        boxShadow: getBoxShadowString({
-          borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props)
-        }),
+        ...baseBorder("default", props),
         _hover: {
-          boxShadow: getBoxShadowString({
-            borderColor: mode("darkGrey", "white")(props),
-            borderWidth: 2
-          })
+          ...baseBorder("hover", props)
         },
         _active: {
           ...baseBackground("active", props),
-          boxShadow: getBoxShadowString({
-            borderColor: mode("darkGrey", "whiteAlpha.400")(props),
-            borderWidth: 1
-          })
+          ...baseBorder("default", props)
         },
         _expanded: {
-          ...baseBackground("active", props),
-          _hover: {
-            ...baseBackground("active", props),
-            boxShadow: "none"
-          },
-          _active: {
-            ...baseBackground("active", props),
-            boxShadow: getBoxShadowString({
-              borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props),
-              borderWidth: 1
-            })
-          }
+          ...baseBackground("active", props)
         }
       }
     }),
@@ -10813,41 +10717,20 @@ var config8 = helpers3.defineMultiStyleConfig({
     }),
     floating: (props) => ({
       trigger: {
+        boxShadow: "sm",
         ...floatingBackground("default", props),
-        boxShadow: getBoxShadowString({
-          borderColor: mode("silver", "whiteAlpha.400")(props),
-          borderWidth: 1,
-          baseShadow: "sm"
-        }),
+        ...floatingBorder("default", props),
         transition: "all .1s ease-out",
         _hover: {
           ...floatingBackground("hover", props),
-          boxShadow: getBoxShadowString({
-            borderColor: mode("silver", "whiteAlpha.400")(props),
-            borderWidth: 2,
-            baseShadow: "sm"
-          })
+          ...floatingBorder("hover", props)
         },
         _active: {
           ...floatingBackground("active", props),
-          boxShadow: getBoxShadowString({
-            borderColor: mode("silver", "whiteAlpha.400")(props),
-            borderWidth: mode(0, 1)(props),
-            baseShadow: "sm"
-          })
+          ...floatingBorder("active", props)
         },
         _expanded: {
-          ...floatingBackground("active", props),
-          _hover: {
-            boxShadow: getBoxShadowString({
-              borderColor: "darkGrey",
-              borderWidth: 3
-            })
-          },
-          _active: {
-            ...floatingBackground("active", props),
-            boxShadow: "none"
-          }
+          ...floatingBackground("active", props)
         }
       }
     })
@@ -10882,27 +10765,27 @@ var config8 = helpers3.defineMultiStyleConfig({
     }
   }
 });
-var card_select_default = config8;
-var helpers4 = createMultiStyleConfigHelpers$1(checkboxAnatomy.keys);
-var config9 = helpers4.defineMultiStyleConfig({
+var card_select_default = config9;
+var helpers5 = createMultiStyleConfigHelpers$1(checkboxAnatomy.keys);
+var config10 = helpers5.defineMultiStyleConfig({
   baseStyle: (props) => ({
     container: {
       _hover: {
         "input:enabled:not([aria-invalid]) + .chakra-checkbox__control": {
           ...baseBackground("hover", props),
-          borderColor: mode("darkGrey", "white")(props)
+          borderColor: brandBackground("hover", props).backgroundColor
         },
         "input:enabled[aria-invalid] + .chakra-checkbox__control": {
           backgroundColor: mode("white", "inherit")(props),
-          borderColor: "brightRed"
+          borderColor: mode("outline.error.light", "outline.error.dark")
         },
         "input:enabled:checked:not([aria-invalid]) + .chakra-checkbox__control": {
-          backgroundColor: mode("darkTeal", "blueGreen")(props),
-          borderColor: mode("darkTeal", "blueGreen")(props)
+          ...brandBackground("hover", props),
+          borderColor: brandBackground("hover", props).backgroundColor
         },
         "input:enabled:checked[aria-invalid] + .chakra-checkbox__control": {
-          backgroundColor: "brightRed",
-          borderColor: "brightRed"
+          borderColor: mode("outline.error.light", "outline.error.dark"),
+          backgroundColor: mode("outline.error.light", "outline.error.dark")
         }
       }
     },
@@ -10919,20 +10802,21 @@ var config9 = helpers4.defineMultiStyleConfig({
       transitionProperty: "background, border-color",
       transitionDuration: "normal",
       border: "2px solid",
-      borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props),
+      borderColor: mode(
+        "base.outline.default.light",
+        "base.outline.default.dark"
+      )(props),
       borderRadius: "xs",
-      color: mode("white", "darkTeal")(props),
       ...baseBackground("default", props),
+      ...focusVisibleStyles(props),
       _checked: {
-        ...baseBackground("selected", props),
-        borderColor: mode("pine", "coralGreen")(props),
-        ...baseText("default", props),
-        color: mode("white", "darkTeal")(props),
-        ...focusVisibleStyles(props),
+        ...brandText("default", props),
+        ...brandBackground("default", props),
+        borderColor: brandBackground("default", props).backgroundColor,
         _disabled: {
           ...baseBackground("disabled", props),
-          borderColor: mode("blackAlpha.200", "whiteAlpha.200")(props),
-          color: mode("blackAlpha.200", "whiteAlpha.200")(props)
+          ...baseText("disabled", props),
+          borderColor: "currentColor"
         },
         _invalid: {
           backgroundColor: "brightRed",
@@ -10941,7 +10825,7 @@ var config9 = helpers4.defineMultiStyleConfig({
       },
       _disabled: {
         ...baseBackground("disabled", props),
-        borderColor: mode("blackAlpha.200", "whiteAlpha.200")(props)
+        borderColor: baseText("disabled", props).color
       },
       _invalid: {
         ...baseBackground("default", props),
@@ -10954,34 +10838,34 @@ var config9 = helpers4.defineMultiStyleConfig({
     }
   })
 });
-var checkbox_default = config9;
-var parts3 = anatomy$1("choice-chip").parts("container", "icon", "label");
-var helpers5 = createMultiStyleConfigHelpers$1(parts3.keys);
-var config10 = helpers5.defineMultiStyleConfig({
+var checkbox_default = config10;
+var parts4 = anatomy$1("choice-chip").parts("container", "icon", "label");
+var helpers6 = createMultiStyleConfigHelpers$1(parts4.keys);
+var config11 = helpers6.defineMultiStyleConfig({
   baseStyle: (props) => ({
     container: {
       display: "inline-flex",
       alignItems: "center",
       fontSize: "16px",
-      px: 1,
       cursor: "pointer",
+      transitionProperty: "all",
+      transitionDuration: "fast",
       _checked: {
+        outlineColor: "transparent",
         ...accentText("selected", props),
         ...accentBackground("selected", props),
-        ...accentBorder("selected", props),
         _hover: {
           ...brandBackground("hover", props),
           ...baseText("selected", props),
-          ...brandBorder("hover", props)
+          outlineColor: "transparent"
         },
         _active: {
           ...baseText("selected", props),
-          ...brandBackground("active", props),
-          ...brandBorder("active", props)
+          ...brandBackground("active", props)
         }
       },
       _disabled: {
-        cursor: "not-allowed",
+        pointerEvents: "none",
         boxShadow: "none",
         ...baseText("disabled", props),
         ...baseBackground("disabled", props),
@@ -11005,7 +10889,7 @@ var config10 = helpers5.defineMultiStyleConfig({
       "input:focus-visible + &": focusVisibleStyles(props)._focusVisible
     },
     icon: {
-      mr: props.hasLabel ? 1 : 0
+      marginRight: props.hasLabel ? 1 : 0
     }
   }),
   variants: {
@@ -11014,12 +10898,10 @@ var config10 = helpers5.defineMultiStyleConfig({
         ...baseBackground("default", props),
         ...baseBorder("default", props),
         ...baseText("default", props),
-        "@media (hover:hover)": {
-          _hover: {
-            ...baseText("default", props),
-            ...baseBorder("hover", props),
-            ...baseBackground("hover", props)
-          }
+        _hover: {
+          ...baseText("default", props),
+          ...baseBorder("hover", props),
+          ...baseBackground("hover", props)
         },
         _active: {
           ...baseBackground("active", props),
@@ -11031,23 +10913,17 @@ var config10 = helpers5.defineMultiStyleConfig({
       container: {
         ...accentBackground("default", props),
         ...accentText("default", props),
-        ...accentBorder("default", props),
-        "@media (hover:hover)": {
-          _hover: {
-            ...accentBackground("hover", props),
-            ...accentBorder("hover", props),
-            ...accentText("default", props)
-          }
+        _hover: {
+          ...accentBackground("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)
       }
     }),
@@ -11056,10 +10932,12 @@ var config10 = helpers5.defineMultiStyleConfig({
         ...floatingBackground("default", props),
         ...baseText("default", props),
         ...floatingBorder("default", props),
+        boxShadow: "sm",
         _hover: {
           ...floatingBackground("hover", props),
           ...floatingBorder("hover", props),
-          ...baseText("default", props)
+          ...baseText("default", props),
+          boxShadow: "md"
         },
         _active: {
           ...floatingBackground("active", props),
@@ -11070,37 +10948,37 @@ var config10 = helpers5.defineMultiStyleConfig({
     })
   },
   sizes: {
-    sm: {
+    xs: {
       container: {
         borderRadius: "30px",
         _checked: {
           borderRadius: "9px"
         },
         height: "30px",
-        px: 1.5
+        paddingX: 1.5
       }
     },
-    md: {
+    sm: {
       container: {
         borderRadius: "30px",
         _checked: {
           borderRadius: "12px"
         },
         height: "36px",
-        px: 2
+        paddingX: 2
       }
     },
-    lg: {
+    md: {
       container: {
         borderRadius: "30px",
         _checked: {
           borderRadius: "12px"
         },
         height: "42px",
-        px: 2
+        paddingX: 2
       }
     },
-    xl: {
+    lg: {
       container: {
         borderRadius: "30px",
         _checked: {
@@ -11112,12 +10990,12 @@ var config10 = helpers5.defineMultiStyleConfig({
     }
   },
   defaultProps: {
-    size: "md"
+    size: "sm"
   }
 });
-var choice_chip_default = config10;
+var choice_chip_default = config11;
 var $size6 = cssVar$1("close-button-size");
-var config11 = defineStyleConfig$1({
+var config12 = defineStyleConfig$1({
   baseStyle: (props) => ({
     w: [$size6.reference],
     h: [$size6.reference],
@@ -11156,9 +11034,9 @@ var config11 = defineStyleConfig$1({
     size: "md"
   }
 });
-var close_button_default = config11;
+var close_button_default = config12;
 var { variants: variants13, defaultProps: defaultProps2 } = badge_default;
-var config12 = defineStyleConfig$1({
+var config13 = defineStyleConfig$1({
   baseStyle: {
     fontFamily: "monospace",
     fontSize: ["mobile.xs", "desktop.xs"],
@@ -11168,8 +11046,8 @@ var config12 = defineStyleConfig$1({
   variants: variants13,
   defaultProps: defaultProps2
 });
-var code_default = config12;
-var parts4 = anatomy$1("datepicker").parts(
+var code_default = config13;
+var parts5 = anatomy$1("datepicker").parts(
   "wrapper",
   "calendarTriggerButton",
   "arrow",
@@ -11182,14 +11060,10 @@ var parts4 = anatomy$1("datepicker").parts(
   "dateTimeSegment"
 );
 var $arrowBackground = cssVar$1("popper-arrow-bg");
-var helpers6 = createMultiStyleConfigHelpers$1(parts4.keys);
-var config13 = helpers6.defineMultiStyleConfig({
+var helpers7 = createMultiStyleConfigHelpers$1(parts5.keys);
+var config14 = helpers7.defineMultiStyleConfig({
   baseStyle: (props) => ({
     wrapper: {
-      backgroundColor: mode("white", "night")(props),
-      boxShadow: getBoxShadowString({
-        borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props)
-      }),
       transitionProperty: "box-shadow",
       transitionDuration: "fast",
       borderRadius: "sm",
@@ -11201,7 +11075,8 @@ var config13 = helpers6.defineMultiStyleConfig({
         zIndex: zIndices2.docked
       },
       _disabled: {
-        pointerEvents: "none"
+        pointerEvents: "none",
+        ...baseBackground("disabled", props)
       },
       _focusWithin: {
         ...focusVisibleStyles(props)._focusVisible
@@ -11220,7 +11095,6 @@ var config13 = helpers6.defineMultiStyleConfig({
       )(props)
     },
     calendarTriggerButton: {
-      backgroundColor: mode("white", "night")(props),
       width: 8,
       display: "flex",
       alignItems: "center",
@@ -11233,42 +11107,35 @@ var config13 = helpers6.defineMultiStyleConfig({
       paddingBottom: 1,
       borderRadius: "sm",
       right: "9px",
+      ...focusVisibleStyles(props),
       _hover: {
-        boxShadow: "none",
-        backgroundColor: mode("seaMist", "pine")(props)
+        ...ghostBackground("hover", props)
       },
       _active: {
-        backgroundColor: mode("mint", "whiteAlpha.200")(props)
+        ...ghostBackground("active", props)
       },
-      ...focusVisibleStyles(props),
       _invalid: {
-        boxShadow: getBoxShadowString({
-          borderColor: "brightRed",
-          borderWidth: 2
-        })
+        ...baseBorder("invalid", props)
       }
     },
     arrow: {
-      [$arrowBackground.variable]: mode("white", colors.night)(props)
+      [$arrowBackground.variable]: surface("default", props).backgroundColor
     },
     calendarPopover: {
-      backgroundColor: mode("white", "night")(props),
-      color: mode("darkGrey", "white")(props),
-      boxShadow: getBoxShadowString({
-        borderWidth: 2,
-        borderColor: mode("blackAlpha.200", "whiteAlpha.200")(props),
-        baseShadow: "md"
-      })
+      ...baseBackground("default", props),
+      ...baseText("default", props),
+      ...baseBorder("default", props),
+      boxShadow: "md"
     },
     weekdays: {
-      color: mode("darkGrey", "white")(props)
+      ...baseText("default", props)
     },
     weekend: {
-      color: mode("darkTeal", "seaMist")(props)
+      ...accentText("default", props)
     },
     dateCell: {
-      backgroundColor: mode("white", "night")(props),
-      color: mode("darkGrey", "white")(props),
+      ...ghostBackground("default", props),
+      ...baseText("default", props),
       borderRadius: "50%",
       position: "relative",
       transition: ".1s ease-in-out",
@@ -11278,193 +11145,79 @@ var config13 = helpers6.defineMultiStyleConfig({
       transitionProperty: "common",
       transitionSpeed: "fast",
       _hover: {
-        backgroundColor: mode("seaMist", "pine")(props)
-      },
-      _focusVisible: {
-        outlineColor: "greenHaze",
-        outlineWidth: 2,
-        outlineStyle: "solid"
+        ...ghostBackground("hover", props)
       },
+      ...focusVisibleStyles(props),
       _active: {
-        backgroundColor: "seaMist",
-        boxShadow: "none",
-        color: mode("darkGrey", "white")(props)
+        ...ghostBackground("active", props)
       },
       _disabled: {
-        color: "osloGrey",
-        boxShadow: "none",
+        ...baseBackground("disabled", props),
+        ...baseText("disabled", props),
         pointerEvents: "none"
       },
       _selected: {
-        backgroundColor: mode("darkTeal", "pine")(props),
-        color: "white",
+        ...brandBackground("default", props),
+        ...brandText("default", props),
         _active: {
-          backgroundColor: "seaMist",
-          boxShadow: "none",
-          color: "darkGrey"
+          ...brandBackground("active", props),
+          ...brandText("active", props)
         }
       },
       "&[data-today]": {
-        boxShadow: getBoxShadowString({
-          borderWidth: 1,
-          borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props)
-        })
+        ...baseBorder("default", props)
       },
       "&[data-unavailable]": {
         pointerEvents: "none",
-        color: "osloGrey"
+        ...baseBackground("disabled", props),
+        ...baseText("disabled", props)
       }
     }
   }),
   variants: {
     base: (props) => ({
       wrapper: {
-        boxShadow: getBoxShadowString({
-          borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props)
-        }),
+        ...baseBorder("default", props),
+        ...baseBackground("default", props),
         _hover: {
-          boxShadow: getBoxShadowString({
-            borderColor: mode("darkGrey", "white")(props),
-            borderWidth: 2
-          })
+          ...baseBorder("hover", props)
         },
         _invalid: {
-          boxShadow: getBoxShadowString({
-            borderColor: "brightRed",
-            borderWidth: 2
-          })
+          ...baseBorder("invalid", props)
         },
         _disabled: {
-          boxShadow: getBoxShadowString({
-            borderColor: mode("osloGrey", "whiteAlpha.400")(props),
-            borderWidth: 1
-          }),
-          _focus: {
-            boxShadow: getBoxShadowString({
-              borderColor: mode("osloGrey", "whiteAlpha.400")(props),
-              borderWidth: 1
-            })
-          }
-        }
-      },
-      calendar: {
-        backgroundColor: mode("white", "night")(props),
-        color: mode("darkGrey", "white")(props),
-        boxShadow: getBoxShadowString({
-          borderWidth: 2,
-          borderColor: mode("blackAlpha.200", "whiteAlpha.200")(props)
-        })
-      },
-      dateCell: {
-        color: mode("darkGrey", "white")(props),
-        _hover: {
-          backgroundColor: mode("seaMist", "pine")(props)
-        },
-        "&[data-today]": {
-          boxShadow: getBoxShadowString({
-            borderWidth: 1,
-            borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props)
-          })
+          ...baseBorder("disabled", props)
         }
       }
     }),
     floating: (props) => ({
       wrapper: {
-        boxShadow: getBoxShadowString({
-          borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props),
-          baseShadow: "sm"
-        }),
+        ...floatingBorder("default", props),
+        boxShadow: "sm",
         _hover: {
-          boxShadow: getBoxShadowString({
-            borderColor: mode("darkGrey", "white")(props),
-            borderWidth: 2,
-            baseShadow: "sm"
-          })
+          ...floatingBorder("hover", props)
         },
         _invalid: {
-          boxShadow: getBoxShadowString({
-            borderColor: "brightRed",
-            borderWidth: 2,
-            baseShadow: "sm"
-          })
+          ...baseBorder("invalid", props)
         },
         _disabled: {
-          boxShadow: getBoxShadowString({
-            borderColor: mode("osloGrey", "whiteAlpha.400")(props),
-            borderWidth: 1,
-            baseShadow: "sm"
-          }),
-          _focus: {
-            boxShadow: getBoxShadowString({
-              borderColor: mode("osloGrey", "whiteAlpha.400")(props),
-              borderWidth: 1,
-              baseShadow: "sm"
-            })
-          }
-        }
-      },
-      calendar: {
-        backgroundColor: mode("white", "night")(props),
-        color: mode("darkGrey", "white")(props),
-        boxShadow: getBoxShadowString({
-          borderColor: mode("grey.200", "whiteAlpha.400")(props),
-          baseShadow: "sm"
-        })
-      },
-      dateCell: {
-        color: mode("darkGrey", "white")(props),
-        _hover: {
-          backgroundColor: mode("", "")(props)
+          ...baseBorder("disabled", props)
         }
       }
     }),
     ghost: (props) => ({
       wrapper: {
-        boxShadow: "none",
         _hover: {
-          boxShadow: getBoxShadowString({
-            borderColor: mode("darkGrey", "white")(props),
-            borderWidth: 2
-          })
+          ...baseBorder("hover", props)
         },
         _invalid: {
-          boxShadow: getBoxShadowString({
-            borderColor: "brightRed",
-            borderWidth: 2
-          })
-        },
-        _disabled: {
-          boxShadow: getBoxShadowString({
-            borderColor: mode("osloGrey", "whiteAlpha.400")(props),
-            borderWidth: 1
-          }),
-          _focus: {
-            boxShadow: getBoxShadowString({
-              borderColor: mode("osloGrey", "whiteAlpha.400")(props),
-              borderWidth: 1
-            })
-          }
-        }
-      },
-      calendar: {
-        backgroundColor: mode("white", "night")(props),
-        color: mode("darkGrey", "white")(props),
-        boxShadow: "none"
-      },
-      dateCell: {
-        color: mode("darkGrey", "white")(props),
-        _hover: {
-          backgroundColor: mode("seaMist", "pine")(props)
-        },
-        _selected: {
-          backgroundColor: mode("transparent", "primaryGreen")(props),
-          color: "darkGrey"
+          ...baseBorder("invalid", props)
         }
       }
     })
   }
 });
-var datepicker_default = config13;
+var datepicker_default = config14;
 var baseStyle44 = defineStyle((props) => ({
   borderColor: mode("blackAlpha.300", "whiteAlpha.300")(props)
 }));
@@ -11501,8 +11254,26 @@ var divider_default = defineStyleConfig({
     size: "md"
   }
 });
-var helpers7 = createMultiStyleConfigHelpers$1(modalAnatomy.keys);
-var config14 = helpers7.defineMultiStyleConfig({
+var bg = (bg2, props) => {
+  switch (bg2) {
+    case "default":
+      return {
+        backgroundColor: mode("bg.default.light", "bg.default.dark")(props)
+      };
+    case "secondary":
+      return {
+        backgroundColor: mode("bg.secondary.light", "bg.secondary.dark")(props)
+      };
+    case "tertiary":
+      return {
+        backgroundColor: mode("bg.tertiary.light", "bg.tertiary.dark")(props)
+      };
+  }
+};
+
+// src/theme/components/drawer.ts
+var helpers8 = createMultiStyleConfigHelpers$1(modalAnatomy.keys);
+var config15 = helpers8.defineMultiStyleConfig({
   baseStyle: (props) => ({
     overlay: {
       backgroundColor: "blackAlpha.600",
@@ -11517,8 +11288,8 @@ var config14 = helpers7.defineMultiStyleConfig({
       overflow: props.scrollBehavior === "inside" ? "hidden" : "auto"
     },
     dialog: {
-      backgroundColor: mode("white", "pine")(props),
-      color: mode("inherit", "white")(props),
+      ...bg("default", props),
+      ...baseText("default", props),
       zIndex: "modal",
       maxHeight: props.scrollBehavior === "inside" ? "calc(100% - 7.5rem)" : void 0,
       boxShadow: "md"
@@ -11573,7 +11344,7 @@ function getSize5(value) {
         "@supports(min-height: -webkit-fill-available)": {
           minHeight: "-webkit-fill-available"
         },
-        my: 0
+        marginY: 0
       }
     };
   }
@@ -11581,10 +11352,10 @@ function getSize5(value) {
     dialog: { maxWidth: value }
   };
 }
-var drawer_default = config14;
-var parts5 = anatomy$1("fab").parts("container", "icon", "text");
-var helpers8 = createMultiStyleConfigHelpers$1(parts5.keys);
-var config15 = helpers8.defineMultiStyleConfig({
+var drawer_default = config15;
+var parts6 = anatomy$1("fab").parts("container", "icon", "text");
+var helpers9 = createMultiStyleConfigHelpers$1(parts6.keys);
+var config16 = helpers9.defineMultiStyleConfig({
   baseStyle: (props) => ({
     container: {
       display: "flex",
@@ -11600,20 +11371,14 @@ var config15 = helpers8.defineMultiStyleConfig({
       transitionDuration: "fast",
       transitionProperty: "common",
       position: "fixed",
+      zIndex: "sticky",
       ...getPositionProps(props),
-      _disabled: {
-        backgroundColor: mode("blackAlpha.100", "whiteAlpha.100")(props),
-        color: mode("blackAlpha.400", "whiteAlpha.400")(props)
-      },
-      ...focusVisibleStyles(props),
-      _hover: {
-        backgroundColor: "seaMist",
-        _disabled: {
-          backgroundColor: mode("blackAlpha.100", "whiteAlpha.100")(props),
-          color: mode("blackAlpha.400", "whiteAlpha.400")(props)
-        }
-      },
-      zIndex: "sticky"
+      ...focusVisibleStyles(props),
+      _disabled: {
+        ...surface("disabled", props),
+        ...baseText("disabled", props),
+        pointerEvents: "none"
+      }
     },
     icon: {
       marginRight: props.isTextVisible ? 1 : 0
@@ -11627,78 +11392,52 @@ var config15 = helpers8.defineMultiStyleConfig({
     }
   }),
   variants: {
-    dark: (props) => ({
-      container: {
-        backgroundColor: "darkTeal",
-        color: "white",
-        _active: { backgroundColor: "pine" },
-        _hover: {
-          backgroundColor: "night"
-        }
-      }
-    }),
-    light: {
-      container: {
-        backgroundColor: "white",
-        color: "darkGrey",
-        _active: { backgroundColor: "mint" }
-      }
-    },
-    green: {
-      container: {
-        backgroundColor: "mint",
-        color: "darkTeal",
-        _active: { color: "darkTeal", backgroundColor: "lightGrey" }
-      }
-    },
     brand: (props) => ({
       container: {
-        backgroundColor: mode("darkTeal", "mint")(props),
-        color: mode("white", "darkTeal")(props),
-        _active: { backgroundColor: mode("pine", "white")(props) },
+        ...brandBackground("default", props),
+        ...brandText("default", props),
         _hover: {
-          backgroundColor: mode("night", "seaMist")(props)
+          ...brandBackground("hover", props)
+        },
+        _active: {
+          ...brandBackground("active", props)
         }
       }
     }),
     base: (props) => ({
       container: {
-        backgroundColor: mode("white", "whiteAlpha.100")(props),
-        color: mode("darkGrey", "white")(props),
-        _active: {
-          backgroundColor: mode("mint", "whiteAlpha.100")(props),
-          color: mode("darkGrey", "white")(props)
-        },
+        ...baseBackground("default", props),
+        ...baseBorder("default", props),
+        ...baseText("default", props),
         _hover: {
-          backgroundColor: mode("white", "transparent")(props),
-          boxShadow: mode(
-            `inset 0 0 0 2px ${props.theme.colors.darkGrey}`,
-            `inset 0 0 0 2px ${props.theme.colors.white}`
-          )(props),
-          color: mode("darkGrey", "white")(props)
+          ...baseBackground("hover", props),
+          ...baseBorder("hover", props)
+        },
+        _active: {
+          ...baseBorder("default", props),
+          ...baseBackground("active", props)
         }
       }
     }),
     accent: (props) => ({
       container: {
-        backgroundColor: mode("mint", "pine")(props),
-        color: mode("darkTeal", "white")(props),
-        _active: {
-          backgroundColor: mode("seaMist", "whiteAlpha.100")(props),
-          color: mode("darkTeal", "white")(props)
-        },
+        ...accentBackground("default", props),
+        ...accentText("default", props),
         _hover: {
-          backgroundColor: mode("coralGreen", "whiteAlpha.200")(props),
-          color: mode("darkTeal", "white")(props)
+          ...accentBackground("hover", props),
+          ...accentText("default", props)
+        },
+        _active: {
+          ...accentBackground("active", props)
         }
       }
     })
   },
   defaultProps: {
-    variant: "dark"
+    variant: "brand"
   }
 });
-var fab_default = config15;
+var fab_default = config16;
 var getPositionProps = (props) => {
   switch (props.placement) {
     case "top left":
@@ -11711,8 +11450,8 @@ var getPositionProps = (props) => {
       return { bottom: "1em", right: "1em" };
   }
 };
-var helpers9 = createMultiStyleConfigHelpers$1(formAnatomy.keys);
-var config16 = helpers9.defineMultiStyleConfig({
+var helpers10 = createMultiStyleConfigHelpers$1(formAnatomy.keys);
+var config17 = helpers10.defineMultiStyleConfig({
   baseStyle: (props) => ({
     container: {
       width: "100%",
@@ -11732,8 +11471,8 @@ var config16 = helpers9.defineMultiStyleConfig({
     }
   })
 });
-var form_default = config16;
-var config17 = defineStyleConfig$1({
+var form_default = config17;
+var config18 = defineStyleConfig$1({
   baseStyle: {
     fontSize: "mobile.sm",
     marginEnd: 3,
@@ -11746,7 +11485,7 @@ var config17 = defineStyleConfig$1({
     }
   }
 });
-var form_label_default = config17;
+var form_label_default = config18;
 
 // src/theme/utils/sr-utils.ts
 var srOnly2 = {
@@ -11763,14 +11502,14 @@ var srOnly2 = {
 };
 
 // src/theme/components/info-select.ts
-var parts6 = anatomy("InfoSelect").parts(
+var parts7 = anatomy("InfoSelect").parts(
   "container",
   "label",
   "button",
   "arrowIcon"
 );
-var helpers10 = createMultiStyleConfigHelpers$1(parts6.keys);
-var config18 = helpers10.defineMultiStyleConfig({
+var helpers11 = createMultiStyleConfigHelpers$1(parts7.keys);
+var config19 = helpers11.defineMultiStyleConfig({
   baseStyle: (props) => ({
     container: {},
     label: {
@@ -11793,19 +11532,15 @@ var config18 = helpers10.defineMultiStyleConfig({
       },
       ...focusVisibleStyles(props),
       _disabled: {
-        color: "whiteAlpha.400",
-        ...baseBackground("disabled", props),
-        _hover: { ...baseBorder("disabled", props) },
-        _focus: { ...baseBorder("disabled", props) }
+        pointerEvents: "none",
+        ...baseText("disabled", props),
+        ...baseBackground("disabled", props)
       },
       _active: {
         ...baseBackground("active", props)
       },
       _invalid: {
-        ...baseBorder("invalid", props),
-        _hover: {
-          ...baseBorder("hover", props)
-        }
+        ...baseBorder("invalid", props)
       }
     },
     arrowIcon: {}
@@ -11831,8 +11566,8 @@ var config18 = helpers10.defineMultiStyleConfig({
     variant: "base"
   }
 });
-var info_select_default = config18;
-var parts7 = anatomy$1("travel-tag").parts(
+var info_select_default = config19;
+var parts8 = anatomy$1("travel-tag").parts(
   "container",
   "iconContainer",
   "icon",
@@ -11841,8 +11576,8 @@ var parts7 = anatomy$1("travel-tag").parts(
   "description",
   "deviationIcon"
 );
-var helpers11 = createMultiStyleConfigHelpers$1(parts7.keys);
-var config19 = helpers11.defineMultiStyleConfig({
+var helpers12 = createMultiStyleConfigHelpers$1(parts8.keys);
+var config20 = helpers12.defineMultiStyleConfig({
   baseStyle: (props) => ({
     container: {
       position: "relative",
@@ -11857,11 +11592,9 @@ var config19 = helpers11.defineMultiStyleConfig({
         backgroundColor: "silver"
       },
       "button&, a&": {
+        boxShadow: "sm",
         _hover: {
-          boxShadow: getBoxShadowString({
-            borderColor: props.theme.colors.blackAlpha[100],
-            baseShadow: "sm"
-          })
+          boxShadow: "md"
         },
         ...focusVisibleStyles(props),
         _active: {
@@ -12035,7 +11768,7 @@ var config19 = helpers11.defineMultiStyleConfig({
     size: "md"
   }
 });
-var travel_tag_default = config19;
+var travel_tag_default = config20;
 var getDeviationContainerStyle = (props) => {
   switch (props.deviationLevel) {
     case "critical":
@@ -12081,7 +11814,7 @@ var deviationIconColor = {
 };
 
 // src/theme/components/info-tag.ts
-var parts8 = anatomy$1("info-tag").parts(
+var parts9 = anatomy$1("info-tag").parts(
   "container",
   "iconContainer",
   "icon",
@@ -12089,8 +11822,8 @@ var parts8 = anatomy$1("info-tag").parts(
   "title",
   "description"
 );
-var helpers12 = createMultiStyleConfigHelpers$1(parts8.keys);
-var config20 = helpers12.defineMultiStyleConfig({
+var helpers13 = createMultiStyleConfigHelpers$1(parts9.keys);
+var config21 = helpers13.defineMultiStyleConfig({
   baseStyle: (props) => ({
     ...travel_tag_default.baseStyle(props),
     iconContainer: {
@@ -12137,16 +11870,16 @@ var config20 = helpers12.defineMultiStyleConfig({
     })
   }
 });
-var info_tag_default = config20;
-var helpers13 = createMultiStyleConfigHelpers$1(inputAnatomy.keys);
-var config21 = helpers13.defineMultiStyleConfig({
+var info_tag_default = config21;
+var helpers14 = createMultiStyleConfigHelpers$1(inputAnatomy.keys);
+var config22 = helpers14.defineMultiStyleConfig({
   baseStyle: (props) => ({
     field: {
       appearance: "none",
       width: "100%",
       outline: "none",
       border: 0,
-      backgroundColor: mode("white", "darkGrey")(props),
+      ...baseBackground("default", props),
       borderRadius: "sm",
       transitionProperty: "common",
       transitionDuration: "fast",
@@ -12154,42 +11887,27 @@ var config21 = helpers13.defineMultiStyleConfig({
       paddingX: 3,
       height: "54px",
       fontSize: "mobile.md",
-      boxShadow: getBoxShadowString({
-        borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props)
-      }),
-      _active: {
-        backgroundColor: mode("mint", "whiteAlpha.100")(props),
-        boxShadow: getBoxShadowString({
-          borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props)
-        })
-      },
+      ...baseBorder("default", props),
       _hover: {
-        boxShadow: getBoxShadowString({
-          borderColor: mode("darkGrey", "white")(props),
-          borderWidth: 2
-        })
+        ...baseBorder("hover", props)
+      },
+      _active: {
+        ...baseBackground("active", props),
+        ...baseBorder("default", props)
       },
       _focusVisible: {
         ...focusVisibleStyles(props)._focusVisible,
-        outlineOffset: -2
+        outlineOffset: 0
       },
       _disabled: {
-        backgroundColor: mode("blackAlpha.100", "whiteAlpha.100")(props),
-        boxShadow: getBoxShadowString({
-          borderColor: mode("blackAlpha.200", "whiteAlpha.200")(props)
-        }),
-        cursor: "not-allowed"
+        ...surface("disabled", props),
+        ...baseBorder("disabled", props),
+        pointerEvents: "none"
       },
       _invalid: {
-        boxShadow: getBoxShadowString({
-          borderColor: "brightRed",
-          borderWidth: 2
-        }),
+        ...baseBorder("invalid", props),
         _hover: {
-          boxShadow: getBoxShadowString({
-            borderColor: mode("darkGrey", "white")(props),
-            borderWidth: 2
-          })
+          ...baseBorder("hover", props)
         }
       },
       " + label": {
@@ -12215,15 +11933,15 @@ var config21 = helpers13.defineMultiStyleConfig({
     },
     group: {
       ":has(:disabled)": {
-        color: mode("blackAlpha.400", "whiteAlpha.400")(props)
+        ...baseText("disabled", props)
       }
     }
   })
 });
-var input_default = config21;
-var parts9 = anatomy$1("line-tag").parts("iconContainer", "icon");
-var helpers14 = createMultiStyleConfigHelpers$1(parts9.keys);
-var config22 = helpers14.defineMultiStyleConfig({
+var input_default = config22;
+var parts10 = anatomy$1("line-tag").parts("iconContainer", "icon");
+var helpers15 = createMultiStyleConfigHelpers$1(parts10.keys);
+var config23 = helpers15.defineMultiStyleConfig({
   baseStyle: {
     iconContainer: {
       display: "flex",
@@ -12340,8 +12058,8 @@ var config22 = helpers14.defineMultiStyleConfig({
     size: "md"
   }
 });
-var line_icon_default = config22;
-var config23 = defineStyleConfig$1({
+var line_icon_default = config23;
+var config24 = defineStyleConfig$1({
   baseStyle: (props) => ({
     transitionProperty: "common",
     transitionDuration: "fast",
@@ -12374,7 +12092,7 @@ var config23 = defineStyleConfig$1({
   }),
   variants: {
     primary: (props) => ({
-      ...brandText("default", props),
+      ...accentText("default", props),
       _hover: {
         ...brandText("hover", props),
         ...brandBackground("hover", props)
@@ -12391,16 +12109,16 @@ var config23 = defineStyleConfig$1({
       )(props)}, ${mode("blackAlpha.400", "whiteAlpha.400")(props)})`,
       ...baseText("default", props),
       "&:focus, &:focus-visible, &:active, &:hover": {
-        outline: "solid",
-        outlineWidth: "1px"
+        outline: "1px solid"
       },
       ...baseBackground("default", props),
       _hover: {
-        outlineColor: mode("darkGrey", "white")(props),
-        ...baseBackground("hover", props)
+        ...baseBorder("hover", props),
+        // TODO: This is also weird
+        ...baseBackground("hover", props),
+        outlineWidth: 1
       },
       _active: {
-        outlineColor: mode("blackAlpha.400", "whiteAlpha.400")(props),
         ...baseBackground("active", props)
       }
     })
@@ -12409,7 +12127,7 @@ var config23 = defineStyleConfig$1({
     variant: "primary"
   }
 });
-var link_default = config23;
+var link_default = config24;
 
 // src/theme/components/list.ts
 var { defineMultiStyleConfig: defineMultiStyleConfig28, definePartsStyle: definePartsStyle28 } = createMultiStyleConfigHelpers(listAnatomy.keys);
@@ -12429,27 +12147,24 @@ var baseStyle45 = definePartsStyle28({
 var list_default = defineMultiStyleConfig28({
   baseStyle: baseStyle45
 });
-var parts10 = anatomy("ListBox").parts(
+var parts11 = anatomy("ListBox").parts(
   "container",
   "item",
   "label",
   "description"
 );
-var helpers15 = createMultiStyleConfigHelpers$1(parts10.keys);
-var config24 = helpers15.defineMultiStyleConfig({
+var helpers16 = createMultiStyleConfigHelpers$1(parts11.keys);
+var config25 = helpers16.defineMultiStyleConfig({
   baseStyle: (props) => ({
     container: {
-      // avoiding extra div by blending a transparent color into darkGrey for dark mode
-      backgroundColor: mode(
-        "white",
-        `color-mix(in srgb, ${props.theme.colors.accent}, ${colors.white} 10%)`
-      )(props),
+      ...surface("default", props),
       boxShadow: "sm",
       overflowY: "auto",
       maxHeight: "50vh",
       width: "100%",
       listStyle: "none",
-      borderBottomRadius: "sm"
+      borderBottomRadius: "sm",
+      ...baseBorder("default", props)
     },
     item: {
       paddingX: 2,
@@ -12483,10 +12198,10 @@ var config24 = helpers15.defineMultiStyleConfig({
     }
   })
 });
-var listbox_default = config24;
-var parts11 = anatomy$1("media-controller-button").parts("container", "icon");
-var helpers16 = createMultiStyleConfigHelpers$1(parts11.keys);
-var config25 = helpers16.defineMultiStyleConfig({
+var listbox_default = config25;
+var parts12 = anatomy$1("media-controller-button").parts("container", "icon");
+var helpers17 = createMultiStyleConfigHelpers$1(parts12.keys);
+var config26 = helpers17.defineMultiStyleConfig({
   baseStyle: (props) => ({
     container: {
       fontSize: 30,
@@ -12500,7 +12215,8 @@ var config25 = helpers16.defineMultiStyleConfig({
       display: "flex",
       padding: 1,
       alignSelf: "center",
-      color: "primaryGreen",
+      // The SVG icon color is set to the brand background color, due to how SVGs work
+      color: brandBackground("default", props).backgroundColor,
       ...focusVisibleStyles(props)
     },
     icon: {
@@ -12511,50 +12227,40 @@ var config25 = helpers16.defineMultiStyleConfig({
     }
   }),
   variants: {
-    play: {
+    play: (props) => ({
       container: {
         padding: 0,
         _hover: {
-          color: "pine"
+          color: brandBackground("hover", props).backgroundColor
         },
         _active: {
-          color: "greenHaze"
+          color: brandBackground("active", props).backgroundColor
         },
         _disabled: {
-          color: "silver",
-          _hover: {
-            color: "silver"
-          },
-          _active: {
-            color: "silver"
-          }
+          pointerEvents: "none",
+          color: surface("disabled", props).backgroundColor
         }
       }
-    },
-    jumpSkip: {
+    }),
+    jumpSkip: (props) => ({
       container: {
         _hover: {
-          backgroundColor: "seaMist"
+          ...ghostBackground("hover", props)
         },
         _active: {
-          backgroundColor: "mint"
+          ...ghostBackground("active", props)
         },
         _disabled: {
-          backgroundColor: "platinum",
-          color: "steel",
-          _hover: {
-            backgroundColor: "platinum"
-          },
-          _active: {
-            backgroundColor: "platinum"
-          }
+          pointerEvents: "none",
+          ...surface("disabled", props),
+          ...baseText("disabled", props)
         }
       },
       icon: {
         width: "0.71em",
         height: "0.71em"
       }
-    }
+    })
   },
   sizes: {
     sm: {
@@ -12569,9 +12275,9 @@ var config25 = helpers16.defineMultiStyleConfig({
     }
   }
 });
-var media_controller_button_default = config25;
-var helpers17 = createMultiStyleConfigHelpers$1(modalAnatomy.keys);
-var config26 = helpers17.defineMultiStyleConfig({
+var media_controller_button_default = config26;
+var helpers18 = createMultiStyleConfigHelpers$1(modalAnatomy.keys);
+var config27 = helpers18.defineMultiStyleConfig({
   baseStyle: (props) => ({
     overlay: {
       backgroundColor: "blackAlpha.600",
@@ -12586,9 +12292,9 @@ var config26 = helpers17.defineMultiStyleConfig({
     },
     dialog: {
       borderRadius: "md",
-      background: mode("white", "pine")(props),
-      color: mode("inherit", "white")(props),
-      my: "3.75rem",
+      ...bg("default", props),
+      ...baseText("default", props),
+      marginY: "3.75rem",
       zIndex: "modal",
       maxHeight: props.scrollBehavior === "inside" ? "calc(100% - 7.5rem)" : void 0,
       boxShadow: "md"
@@ -12634,7 +12340,7 @@ var config26 = helpers17.defineMultiStyleConfig({
     size: "md"
   }
 });
-var modal_default = config26;
+var modal_default = config27;
 function getSize6(value) {
   if (value === "full") {
     return {
@@ -12644,37 +12350,90 @@ function getSize6(value) {
         "@supports(min-height: -webkit-fill-available)": {
           minHeight: "-webkit-fill-available"
         },
-        my: 0
+        marginY: 0
       }
     };
   }
   return {
-    dialog: { maxW: value }
+    dialog: { maxWidth: value }
   };
 }
+var parts13 = anatomy("NumericStepper").parts(
+  "container",
+  "button",
+  "text",
+  "input"
+);
+var helpers19 = createMultiStyleConfigHelpers$1(parts13.keys);
+var config28 = helpers19.defineMultiStyleConfig({
+  baseStyle: (props) => ({
+    container: {
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center"
+    },
+    input: {
+      fontSize: "sm",
+      fontWeight: "bold",
+      marginX: 1,
+      paddingX: 1,
+      borderRadius: "xs",
+      textAlign: "center",
+      transitionProperty: "common",
+      transitionDuration: "fast",
+      ...baseBackground("default", props),
+      ...baseText("default", props),
+      _disabled: {
+        pointerEvents: "none",
+        opacity: 0.5
+      },
+      _hover: {
+        ...baseBorder("default", props)
+      },
+      _active: {
+        ...baseBackground("active", props)
+      },
+      ...focusVisibleStyles(props)
+    },
+    text: {
+      fontSize: "sm",
+      fontWeight: "bold",
+      marginX: 1,
+      paddingX: 1,
+      textAlign: "center",
+      width: "4ch",
+      ...baseText("default", props)
+    },
+    button: {
+      minWidth: "24px",
+      minHeight: "24px"
+    }
+  })
+});
+var numeric_stepper_default = config28;
 var $popperBg2 = cssVar$1("popper-bg");
 var $arrowBg3 = cssVar$1("popper-arrow-bg");
 var $arrowShadowColor2 = cssVar$1("popper-arrow-shadow-color");
-var helpers18 = createMultiStyleConfigHelpers$1(popoverAnatomy.keys);
-var config27 = helpers18.defineMultiStyleConfig({
+var helpers20 = createMultiStyleConfigHelpers$1(popoverAnatomy.keys);
+var config29 = helpers20.defineMultiStyleConfig({
   baseStyle: (props) => ({
     popper: {
       zIndex: "popover"
     },
     content: {
-      [$popperBg2.variable]: mode("colors.darkTeal", "colors.pine")(props),
+      [$popperBg2.variable]: mode(
+        "colors.surface.tertiary.light",
+        "colors.surface.tertiary.dark"
+      )(props),
       backgroundColor: $popperBg2.reference,
       [$arrowBg3.variable]: $popperBg2.reference,
-      [$arrowShadowColor2.variable]: "blackAlpha.300",
+      [$arrowShadowColor2.variable]: "colors.blackAlpha.300",
       color: "white",
+      // TODO: Should this be a semantic token? Where does it fit in?
       borderRadius: "sm",
       padding: 1.5,
       zIndex: "inherit",
-      maxWidth: "20em",
-      _focus: {
-        outline: 0,
-        boxShadow: "outline"
-      }
+      maxWidth: "20em"
     },
     arrow: {
       backgroundColor: "transparent",
@@ -12711,14 +12470,52 @@ var config27 = helpers18.defineMultiStyleConfig({
     }
   }
 });
-var popover_default = config27;
-var parts12 = anatomy$1("progress-indicator").parts(
+var popover_default = config29;
+var parts14 = anatomy("progressBar").parts(
+  "container",
+  "background",
+  "progress",
+  "description"
+);
+var helpers21 = createMultiStyleConfigHelpers(parts14.keys);
+var config30 = helpers21.defineMultiStyleConfig({
+  baseStyle: (props) => ({
+    container: {
+      minWidth: "100px"
+    },
+    background: {
+      display: "flex",
+      backgroundColor: mode("coralGreen", "pine")(props),
+      // TODO: Replace with semantic tokens
+      borderRadius: "sm",
+      justifyContent: "flex-start",
+      marginX: "auto"
+    },
+    progress: {
+      backgroundColor: mode(
+        "brand.surface.active.light",
+        "brand.surface.active.dark"
+      )(props),
+      borderRadius: "sm",
+      maxWidth: "100%",
+      transition: "width .2s ease-out"
+    },
+    description: {
+      textAlign: "center",
+      marginTop: 2,
+      marginX: "auto",
+      fontWeight: "bold"
+    }
+  })
+});
+var progress_bar_default = config30;
+var parts15 = anatomy$1("progress-indicator").parts(
   "root",
   "container",
   "progressDot"
 );
-var helpers19 = createMultiStyleConfigHelpers$1(parts12.keys);
-var config28 = helpers19.defineMultiStyleConfig({
+var helpers22 = createMultiStyleConfigHelpers$1(parts15.keys);
+var config31 = helpers22.defineMultiStyleConfig({
   baseStyle: (props) => ({
     root: {
       width: "100%"
@@ -12734,11 +12531,14 @@ var config28 = helpers19.defineMultiStyleConfig({
       width: 1,
       "&[aria-current='step']": {
         circle: {
-          fill: mode("pine", "coralGreen")(props)
+          fill: mode(
+            "brand.surface.default.light",
+            "brand.surface.default.dark"
+          )(props)
         }
       },
       circle: {
-        fill: mode("blackAlpha.200", "whiteAlpha.200")(props)
+        fill: mode("icon.disabled.light", "icon.disabled.dark")(props)
       }
     }
   }),
@@ -12746,19 +12546,19 @@ var config28 = helpers19.defineMultiStyleConfig({
     variant: "base"
   }
 });
-var progress_indicator_default = config28;
-var helpers20 = createMultiStyleConfigHelpers$1(radioAnatomy.keys);
-var config29 = helpers20.defineMultiStyleConfig({
+var progress_indicator_default = config31;
+var helpers23 = createMultiStyleConfigHelpers$1(radioAnatomy.keys);
+var config32 = helpers23.defineMultiStyleConfig({
   baseStyle: (props) => ({
     container: {
       _hover: {
         "input:enabled + .chakra-radio__control": {
           backgroundColor: "inherit",
-          borderColor: mode("darkGrey", "white")(props)
+          borderColor: mode("text.default.light", "text.default.dark")(props)
         },
         "input:enabled:checked + .chakra-radio__control": {
-          color: mode("darkTeal", "blueGreen")(props),
-          borderColor: mode("darkTeal", "blueGreen")(props)
+          color: brandBackground("hover", props).backgroundColor,
+          borderColor: brandBackground("hover", props).backgroundColor
         }
       }
     },
@@ -12771,17 +12571,17 @@ var config29 = helpers20.defineMultiStyleConfig({
       height: 4,
       backgroundColor: "inherit",
       border: "2px solid",
-      borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props),
+      borderColor: baseBorder("default", props).outlineColor,
       borderRadius: "50%",
       ...focusVisibleStyles(props),
       _disabled: {
-        backgroundColor: mode("blackAlpha.100", "whiteAlpha.100")(props),
-        borderColor: mode("blackAlpha.200", "whiteAlpha.200")(props),
-        color: mode("blackAlpha.200", "whiteAlpha.300")(props)
+        ...baseBackground("disabled", props),
+        ...baseBorder("disabled", props),
+        ...baseText("disabled", props)
       },
       _checked: {
-        borderColor: mode("pine", "coralGreen")(props),
         color: mode("pine", "coralGreen")(props),
+        borderColor: "currentColor",
         _before: {
           content: `""`,
           display: "inline-block",
@@ -12792,18 +12592,19 @@ var config29 = helpers20.defineMultiStyleConfig({
           background: "currentColor"
         },
         _disabled: {
-          backgroundColor: mode("blackAlpha.100", "whiteAlpha.100")(props),
-          borderColor: mode("blackAlpha.200", "whiteAlpha.200")(props),
-          color: mode("blackAlpha.200", "whiteAlpha.300")(props)
+          pointerEvents: "none",
+          ...baseBackground("disabled", props),
+          ...baseBorder("disabled", props),
+          ...baseText("disabled", props)
         }
       }
     }
   })
 });
-var radio_default = config29;
-var parts13 = selectAnatomy.extend("root");
-var helpers21 = createMultiStyleConfigHelpers$1(parts13.keys);
-var config30 = helpers21.defineMultiStyleConfig({
+var radio_default = config32;
+var parts16 = selectAnatomy.extend("root");
+var helpers24 = createMultiStyleConfigHelpers$1(parts16.keys);
+var config33 = helpers24.defineMultiStyleConfig({
   baseStyle: (props) => ({
     root: {
       width: "100%",
@@ -12840,19 +12641,19 @@ var config30 = helpers21.defineMultiStyleConfig({
       strokeLinecap: "round",
       fontSize: "1.125rem",
       _disabled: {
-        color: mode("blackAlpha.400", "whiteAlpha.400")(props)
+        ...baseText("disabled", props)
       }
     }
   })
 });
-var select_default = config30;
+var select_default = config33;
 var fade = (startColor, endColor) => keyframes({
   from: { borderColor: startColor, background: startColor },
   to: { borderColor: endColor, background: endColor }
 });
 var $startColor2 = cssVar$1("skeleton-start-color");
 var $endColor2 = cssVar$1("skeleton-end-color");
-var config31 = defineStyleConfig$1({
+var config34 = defineStyleConfig$1({
   baseStyle: (props) => {
     const defaultStartColor = mode("blackAlpha.300", "whiteAlpha.300")(props);
     const defaultEndColor = mode("blackAlpha.100", "whiteAlpha.100")(props);
@@ -12875,8 +12676,8 @@ var config31 = defineStyleConfig$1({
     };
   }
 });
-var skeleton_default = config31;
-var parts14 = anatomy$1("stepper").parts(
+var skeleton_default = config34;
+var parts17 = anatomy$1("stepper").parts(
   "root",
   "container",
   "innerContainer",
@@ -12888,8 +12689,8 @@ var parts14 = anatomy$1("stepper").parts(
   "stepTitle",
   "closeButton"
 );
-var helpers22 = createMultiStyleConfigHelpers$1(parts14.keys);
-var config32 = helpers22.defineMultiStyleConfig({
+var helpers25 = createMultiStyleConfigHelpers$1(parts17.keys);
+var config35 = helpers25.defineMultiStyleConfig({
   baseStyle: {
     root: {
       display: "flex",
@@ -12938,18 +12739,18 @@ var config32 = helpers22.defineMultiStyleConfig({
     }),
     accent: (props) => ({
       root: {
-        backgroundColor: mode("seaMist", "pine")(props),
-        color: mode("darkTeal", "seaMist")(props)
+        backgroundColor: mode("accent.bg.light", "accent.bg.dark")(props),
+        ...accentText("default", props)
       },
       stepButton: {
-        color: props.state === "disabled" ? mode("blackAlpha.400", "whiteAlpha.400")(props) : props.state === "completed" ? mode("darkTeal", "white")(props) : mode("white", "darkTeal")(props),
+        color: props.state === "disabled" ? baseText("disabled", props).color : props.state === "completed" ? baseText("default", props).color : brandText("default", props).color,
         _hover: {
-          backgroundColor: props.state === "disabled" ? "transparent" : mode("coralGreen", "greenHaze")(props)
+          backgroundColor: props.state === "disabled" ? "transparent" : accentBackground("hover", props).backgroundColor
         }
       },
       backButton: {
         _hover: {
-          backgroundColor: mode("coralGreen", "greenHaze")(props)
+          ...brandBackground("hover", props)
         }
       }
     })
@@ -12958,15 +12759,15 @@ var config32 = helpers22.defineMultiStyleConfig({
     variant: "base"
   }
 });
-var stepper_default = config32;
+var stepper_default = config35;
 var $width2 = cssVar$1("switch-track-width");
 var $height3 = cssVar$1("switch-track-height");
 var $diff2 = cssVar$1("switch-track-diff");
 var diffValue2 = calc$1.subtract($width2, $height3);
 var $translateX2 = cssVar$1("switch-thumb-x");
-var helpers23 = createMultiStyleConfigHelpers$1(switchAnatomy.keys);
-var config33 = helpers23.defineMultiStyleConfig({
-  baseStyle: {
+var helpers26 = createMultiStyleConfigHelpers$1(switchAnatomy.keys);
+var config36 = helpers26.defineMultiStyleConfig({
+  baseStyle: (props) => ({
     container: {
       [$diff2.variable]: diffValue2,
       [$translateX2.variable]: $diff2.reference,
@@ -12979,8 +12780,28 @@ var config33 = helpers23.defineMultiStyleConfig({
       height: [$height3.reference],
       transitionProperty: "common",
       transitionDuration: "fast",
+      ...baseBackground("default", props),
+      ...baseBorder("default", props),
+      ...focusVisibleStyles(props),
+      _hover: {
+        ...baseBackground("hover", props),
+        ...baseBorder("hover", props)
+      },
+      _checked: {
+        ...brandBackground("default", props),
+        outlineColor: "transparent",
+        _hover: {
+          ...brandBackground("hover", props)
+        }
+      },
       _disabled: {
-        pointerEvents: "none"
+        pointerEvents: "none",
+        ...baseBackground("default", props),
+        ...baseBorder("disabled", props),
+        _checked: {
+          ...baseBackground("disabled", props),
+          ...baseBorder("disabled", props)
+        }
       }
     },
     thumb: {
@@ -12989,85 +12810,19 @@ var config33 = helpers23.defineMultiStyleConfig({
       borderRadius: "50%",
       width: [$height3.reference],
       height: [$height3.reference],
+      backgroundColor: mode("base.icon.light", "base.icon.dark")(props),
+      "[data-disabled] &": {
+        backgroundColor: mode(
+          "icon.disabled.light",
+          "icon.disabled.dark"
+        )(props)
+      },
       _checked: {
+        backgroundColor: mode("brand.icon.light", "brand.icon.dark")(props),
         transform: `translateX(${$translateX2.reference})`
       }
     }
-  },
-  variants: {
-    solid: ({ colorMode }) => ({
-      track: {
-        backgroundColor: "osloGrey",
-        boxShadow: mode(
-          "none",
-          getBoxShadowString({
-            borderColor: colors.whiteAlpha[400]
-          })
-        )({ colorMode }),
-        ...focusVisibleStyles({ colorMode }),
-        _hover: {
-          backgroundColor: "steel",
-          boxShadow: mode(
-            "none",
-            getBoxShadowString({ borderColor: colors.white })
-          )({ colorMode })
-        },
-        _checked: {
-          backgroundColor: mode("darkTeal", "celadon")({ colorMode }),
-          _hover: {
-            backgroundColor: mode("pine", "river")({ colorMode }),
-            boxShadow: mode(
-              "none",
-              getBoxShadowString({ borderColor: colors.white })
-            )({ colorMode })
-          }
-        },
-        _disabled: {
-          backgroundColor: mode("platinum", "dimGrey")({ colorMode }),
-          boxShadow: mode(
-            "none",
-            getBoxShadowString({ borderColor: colors.whiteAlpha[400] })
-          )({ colorMode }),
-          _checked: {
-            backgroundColor: mode("platinum", "dimGrey")({ colorMode }),
-            boxShadow: mode(
-              "none",
-              getBoxShadowString({ borderColor: colors.whiteAlpha[400] })
-            )({ colorMode })
-          }
-        }
-      },
-      thumb: {
-        backgroundColor: "white",
-        "[data-disabled] &": {
-          backgroundColor: "steel"
-        }
-      }
-    }),
-    outline: {
-      track: {
-        backgroundColor: "platinum",
-        boxShadow: getBoxShadowString({
-          borderColor: colors.blackAlpha["400"]
-        }),
-        _hover: {
-          backgroundColor: "white"
-        },
-        _checked: {
-          backgroundColor: "white",
-          _hover: {
-            backgroundColor: "mint"
-          }
-        }
-      },
-      thumb: {
-        backgroundColor: "osloGrey",
-        _checked: {
-          backgroundColor: "darkTeal"
-        }
-      }
-    }
-  },
+  }),
   sizes: {
     sm: {
       container: {
@@ -13104,17 +12859,18 @@ var config33 = helpers23.defineMultiStyleConfig({
     size: "md"
   }
 });
-var switch_default = config33;
-var helpers24 = createMultiStyleConfigHelpers$1(tableAnatomy.keys);
+var switch_default = config36;
+var helpers27 = createMultiStyleConfigHelpers$1(tableAnatomy.keys);
 var numericStyles2 = {
   "&[data-is-numeric=true]": {
     textAlign: "end"
   }
 };
-var config34 = helpers24.defineMultiStyleConfig({
-  baseStyle: {
+var config37 = helpers27.defineMultiStyleConfig({
+  baseStyle: (props) => ({
     table: {
       borderCollapse: "collapse",
+      ...baseText("default", props),
       width: "100%"
     },
     th: {
@@ -13132,18 +12888,15 @@ var config34 = helpers24.defineMultiStyleConfig({
       }
     },
     caption: {
-      mt: 4,
+      marginTop: 4,
       fontFamily: "heading",
       textAlign: "center",
       fontWeight: "bold",
       color: "currentColor"
     }
-  },
+  }),
   variants: {
     simple: (props) => ({
-      table: {
-        color: mode("darkGrey", "white")(props)
-      },
       th: {
         borderBottom: "sm",
         borderColor: mode(`blackAlpha.200`, `whiteAlpha.300`)(props),
@@ -13161,19 +12914,19 @@ var config34 = helpers24.defineMultiStyleConfig({
           transitionDuration: "fast",
           transitionProperty: "background-color, box-shadow",
           _hover: {
-            boxShadow: mode(
-              getBoxShadowString({ borderColor: "darkTeal", borderWidth: 3 }),
-              getBoxShadowString({ borderColor: "blueGreen", borderWidth: 3 })
-            )(props),
+            ...baseBorder("hover", props),
+            outlineOffset: "-2px",
             backgroundColor: mode(
               props.colorScheme === "grey" ? "mint" : "coralGreen",
               "whiteAlpha.200"
             )(props)
+          },
+          _last: {
+            borderBottomRadius: "md"
           }
         }
       },
       th: {
-        color: mode("darkGrey", "white")(props),
         border: mode("none", "md"),
         borderColor: mode("transparent", `whiteAlpha.200`)(props),
         backgroundColor: mode(`${props.colorScheme}.100`, "darkTeal")(props),
@@ -13259,9 +13012,9 @@ var config34 = helpers24.defineMultiStyleConfig({
     colorScheme: "grey"
   }
 });
-var table_default = config34;
-var helpers25 = createMultiStyleConfigHelpers$1(tabsAnatomy.keys);
-var config35 = helpers25.defineMultiStyleConfig({
+var table_default = config37;
+var helpers28 = createMultiStyleConfigHelpers$1(tabsAnatomy.keys);
+var config38 = helpers28.defineMultiStyleConfig({
   baseStyle: (props) => ({
     root: {
       display: "flex",
@@ -13272,7 +13025,7 @@ var config35 = helpers25.defineMultiStyleConfig({
       alignItems: "center",
       gap: 0.5,
       width: props.isFitted ? "fit-content" : "100%",
-      ...getTablistColorSchemeProps(props)
+      borderRadius: "xl"
     },
     tab: {
       display: "flex",
@@ -13283,39 +13036,63 @@ var config35 = helpers25.defineMultiStyleConfig({
       width: props.isFitted ? "fit-content" : "100%",
       height: "100%",
       whiteSpace: "nowrap",
-      ...getTabColorSchemeProps(props),
+      borderRadius: "xl",
+      ...focusVisibleStyles(props),
+      _disabled: {
+        ...baseBackground("disabled", props),
+        ...baseText("disabled", props)
+      },
       _selected: {
-        boxShadow: "md",
         pointerEvents: "none",
-        ...getTabColorSchemeSelectedProps(props)
-      },
-      ...focusVisibleStyles(props),
-      _hover: getTabColorSchemeHoverProps(props),
-      _active: getTabColorSchemeActiveProps(props),
-      _disabled: getTabColorSchemeDisabledProps(props)
-    },
-    tabpanel: {}
+        ...brandBackground("default", props),
+        ...brandText("default", props),
+        _hover: {
+          ...brandBackground("hover", props),
+          ...brandText("hover", props)
+        },
+        _active: {
+          ...brandBackground("active", props),
+          ...brandText("active", props)
+        }
+      }
+    }
   }),
   variants: {
-    round: {
+    base: (props) => ({
       tablist: {
-        borderRadius: "42px"
+        ...baseBackground("default", props),
+        ...baseText("default", props),
+        ...baseBorder("default", props)
       },
       tab: {
-        borderRadius: "xl"
+        ...baseText("default", props),
+        _hover: {
+          ...baseBorder("hover", props),
+          outlineOffset: "-2px"
+        },
+        _accent: {
+          ...baseBackground("active", props)
+        }
       }
-    },
-    square: {
+    }),
+    accent: (props) => ({
       tablist: {
-        borderRadius: "sm"
+        backgroundColor: mode("accent.bg.light", "accent.bg.dark")(props),
+        ...accentText("default", props)
       },
       tab: {
-        borderRadius: "9px"
+        ...accentText("default", props),
+        _hover: {
+          ...accentBackground("hover", props)
+        },
+        _accent: {
+          ...accentBackground("active", props)
+        }
       }
-    }
+    })
   },
   sizes: {
-    sm: {
+    xs: {
       tablist: {
         height: "30px",
         padding: "2px"
@@ -13325,7 +13102,7 @@ var config35 = helpers25.defineMultiStyleConfig({
         paddingY: 0
       }
     },
-    md: {
+    sm: {
       tablist: {
         height: "36px",
         padding: 0.5
@@ -13334,7 +13111,7 @@ var config35 = helpers25.defineMultiStyleConfig({
         paddingX: 2
       }
     },
-    lg: {
+    md: {
       tablist: {
         height: "42px",
         padding: 0.5
@@ -13344,7 +13121,7 @@ var config35 = helpers25.defineMultiStyleConfig({
         paddingX: 2
       }
     },
-    xl: {
+    lg: {
       tablist: {
         height: "54px",
         padding: "4px"
@@ -13356,243 +13133,12 @@ var config35 = helpers25.defineMultiStyleConfig({
     }
   },
   defaultProps: {
-    size: "md",
-    variant: "round"
+    size: "sm",
+    variant: "base"
   }
 });
-var tabs_default = config35;
-var getTabColorSchemeProps = (props) => {
-  switch (props.colorScheme) {
-    case "dark":
-      return {
-        color: "white"
-      };
-    case "light":
-      return {
-        color: "darkGrey"
-      };
-    case "green":
-      return {
-        color: "darkTeal"
-      };
-    case "grey":
-      return {
-        color: "darkGrey"
-      };
-    case "base":
-      return {
-        color: mode("darkGrey", "white")(props)
-      };
-    case "accent":
-      return {
-        color: mode("darkTeal", "white")(props)
-      };
-    default:
-      return {};
-  }
-};
-var getTabColorSchemeSelectedProps = (props) => {
-  switch (props.colorScheme) {
-    case "dark":
-      return {
-        backgroundColor: "white",
-        color: "darkTeal",
-        _focus: {
-          boxShadow: `inset 0 0 0 2px ${props.theme.colors.greenHaze}`
-        },
-        "&:focus:not(:focus-visible)": {
-          boxShadow: "none"
-        },
-        _focusVisible: {
-          boxShadow: `inset 0 0 0 2px ${props.theme.colors.greenHaze}`
-        },
-        _hover: {
-          backgroundColor: "white",
-          color: "darkTeal"
-        },
-        _active: {
-          backgroundColor: "white",
-          color: "darkTeal"
-        }
-      };
-    case "base":
-      return {
-        backgroundColor: "pine",
-        color: "white",
-        _hover: {
-          backgroundColor: "darkTeal",
-          color: "white"
-        },
-        _active: {
-          backgroundColor: "darkTeal",
-          color: "white"
-        }
-      };
-    case "accent":
-      return {
-        backgroundColor: "pine",
-        color: "white",
-        _hover: {
-          backgroundColor: "darkTeal",
-          color: "white"
-        },
-        _active: {
-          backgroundColor: "darkTeal",
-          color: "white"
-        }
-      };
-    default:
-      return {
-        backgroundColor: "darkTeal",
-        color: "white",
-        _hover: {
-          backgroundColor: "darkTeal",
-          color: "white"
-        },
-        _active: {
-          backgroundColor: "darkTeal",
-          color: "white"
-        }
-      };
-  }
-};
-var getTabColorSchemeHoverProps = (props) => {
-  switch (props.colorScheme) {
-    case "dark":
-      return {
-        backgroundColor: "pine"
-      };
-    case "light":
-      return {
-        backgroundColor: "silver"
-      };
-    case "green":
-      return {
-        backgroundColor: "coralGreen"
-      };
-    case "grey":
-      return {
-        backgroundColor: "silver"
-      };
-    case "base":
-      return {
-        boxShadow: mode(
-          `inset 0 0 0 2px ${props.theme.colors.darkGrey}`,
-          `inset 0 0 0 2px ${props.theme.colors.white}`
-        )(props),
-        color: mode("darkGrey", "white")(props)
-      };
-    case "accent":
-      return {
-        backgroundColor: mode("seaMist", "whiteAlpha.200")(props),
-        color: mode("darkTeal", "white")(props)
-      };
-    default:
-      return {};
-  }
-};
-var getTabColorSchemeActiveProps = (props) => {
-  switch (props.colorScheme) {
-    case "dark":
-      return {
-        backgroundColor: "celadon",
-        color: "white"
-      };
-    case "light":
-      return {
-        backgroundColor: "mint",
-        color: "darkGrey"
-      };
-    case "green":
-      return {
-        backgroundColor: "seaMist",
-        color: "darkTeal"
-      };
-    case "grey":
-      return {
-        backgroundColor: "lightGrey",
-        color: "darkGrey"
-      };
-    case "base":
-      return {
-        backgroundColor: mode("mint", "whiteAlpha.100")(props),
-        color: mode("darkGrey", "white")(props)
-      };
-    case "accent":
-      return {
-        backgroundColor: mode("seaMist", "whiteAlpha.100")(props),
-        color: mode("darkTeal", "white")(props)
-      };
-    default:
-      return {};
-  }
-};
-var getTabColorSchemeDisabledProps = (props) => {
-  switch (props.colorScheme) {
-    case "dark":
-      return {
-        color: "lightAlpha.200"
-      };
-    case "light":
-      return {
-        color: "silver"
-      };
-    case "green":
-      return {
-        color: "coralGreen"
-      };
-    case "grey":
-      return {
-        color: "steel"
-      };
-    case "base":
-      return {
-        color: mode("blackAlpha.400", "whiteAlpha.400")(props)
-      };
-    case "accent":
-      return {
-        color: mode("blackAlpha.400", "whiteAlpha.400")(props)
-      };
-    default:
-      return {};
-  }
-};
-var getTablistColorSchemeProps = (props) => {
-  switch (props.colorScheme) {
-    case "dark":
-      return { backgroundColor: "darkTeal", color: "white" };
-    case "light":
-      return {
-        backgroundColor: "white",
-        color: "darkGrey",
-        boxShadow: `inset 0 0 0 1px ${props.theme.colors.blackAlpha["400"]}`
-      };
-    case "green":
-      return { backgroundColor: "mint", color: "darkTeal" };
-    case "grey":
-      return {
-        backgroundColor: "platinum",
-        color: "darkGrey"
-      };
-    case "base":
-      return {
-        backgroundColor: mode("white", "transparent")(props),
-        color: "darkGrey",
-        boxShadow: mode(
-          `inset 0 0 0 1px ${props.theme.colors.blackAlpha["400"]}`,
-          `inset 0 0 0 1px ${props.theme.colors.whiteAlpha["400"]}`
-        )(props)
-      };
-    case "accent":
-      return {
-        backgroundColor: mode("mint", "whiteAlpha.100")(props),
-        color: "darkTeal"
-      };
-    default:
-      return {};
-  }
-};
-var config36 = defineStyleConfig$1({
+var tabs_default = config38;
+var config39 = defineStyleConfig$1({
   baseStyle: (props) => ({
     ...input_default.baseStyle(props).field,
     minHeight: "5rem",
@@ -13609,8 +13155,8 @@ var config36 = defineStyleConfig$1({
     }
   })
 });
-var textarea_default = config36;
-var config37 = defineStyleConfig$1({
+var textarea_default = config39;
+var config40 = defineStyleConfig$1({
   baseStyle: {
     display: "flex",
     alignItems: "center",
@@ -13634,94 +13180,7 @@ var config37 = defineStyleConfig$1({
     }
   }
 });
-var toast_default = config37;
-
-// src/theme/components/alert-expandable.ts
-var parts15 = anatomy("alertExpandable").parts("container");
-var helpers26 = createMultiStyleConfigHelpers(parts15.keys);
-var config38 = helpers26.defineMultiStyleConfig({
-  baseStyle: {
-    container: {
-      paddingX: 3,
-      paddingY: 2,
-      fontSize: "inherit",
-      _expanded: {
-        borderBottomRadius: "none"
-      }
-    }
-  },
-  variants: {
-    info: {
-      container: {
-        _hover: {
-          boxShadow: getBoxShadowString({
-            borderColor: "sky",
-            borderWidth: 2
-          })
-        },
-        _active: {
-          backgroundColor: "icyBlue"
-        }
-      }
-    },
-    success: {
-      container: {
-        _hover: {
-          boxShadow: getBoxShadowString({
-            borderColor: "blueGreen",
-            borderWidth: 2
-          })
-        },
-        _active: {
-          backgroundColor: "mint"
-        }
-      }
-    },
-    warning: {
-      container: {
-        _hover: {
-          boxShadow: getBoxShadowString({
-            borderColor: "sunshine",
-            borderWidth: 2
-          })
-        },
-        _active: {
-          backgroundColor: "cornSilk"
-        }
-      }
-    },
-    "alt-transport": {
-      container: {
-        _hover: {
-          boxShadow: getBoxShadowString({
-            borderColor: "golden",
-            borderWidth: 2
-          })
-        },
-        _active: {
-          backgroundColor: "sunshine"
-        }
-      }
-    },
-    error: {
-      container: {
-        _hover: {
-          boxShadow: getBoxShadowString({
-            borderColor: "apricot",
-            borderWidth: 2
-          })
-        },
-        _active: {
-          backgroundColor: "pink"
-        }
-      }
-    }
-  },
-  defaultProps: {
-    variant: "info"
-  }
-});
-var alert_expandable_default = config38;
+var toast_default = config40;
 var fontFaces = `
 @font-face {
   font-family: ${tokens10__default.asset.font["vy-sans"]["light"].name};
@@ -13801,14 +13260,17 @@ var theme = {
   }
 };
 var brandTheme = {
-  ["VyDigital" /* VyDigital */]: {
-    colors: {
-      accent: colors.night
-    }
-  },
+  ["VyDigital" /* VyDigital */]: {},
   ["VyUtvikling" /* VyUtvikling */]: {
     colors: {
-      accent: colors.darkGrey
+      accent: {
+        surface: {
+          default: {
+            light: colors2.seaMist,
+            dark: colors2.darkGrey
+          }
+        }
+      }
     }
   }
 };
@@ -13953,7 +13415,7 @@ var Tooltip = ({
   withCloseButton = false,
   ...props
 }) => {
-  return /* @__PURE__ */ React69__default.createElement(DarkMode, null, /* @__PURE__ */ React69__default.createElement(
+  return /* @__PURE__ */ React69__default.createElement(
     Popover,
     {
       onClose,
@@ -13967,7 +13429,7 @@ var Tooltip = ({
     },
     /* @__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