@vygruppen/spor-react 10.9.1 → 11.0.0

package/dist/{chunk-RK3GOXNY.mjs → chunk-ROHXFJX2.mjs}

@@ -1,6 +1,6 @@
-import tokens11__default from '@vygruppen/spor-design-tokens';
-import * as tokens11 from '@vygruppen/spor-design-tokens';
-export { tokens11 as tokens };
+import tokens12__default from '@vygruppen/spor-design-tokens';
+import * as tokens12 from '@vygruppen/spor-design-tokens';
+export { tokens12 as tokens };
 import { forwardRef, Divider as Divider$1, Stack as Stack$1, Box, useMultiStyleConfig, chakra, Flex, Checkbox as Checkbox$1, useCheckbox, FormControl as FormControl$1, FormLabel as FormLabel$1, useFormControlContext, InputGroup, InputLeftElement, Input as Input$1, InputRightElement, Select, useDisclosure, Button, useControllableState, Radio as Radio$1, RadioGroup as RadioGroup$1, IconButton as IconButton$1, Switch as Switch$1, Textarea as Textarea$1, useStyleConfig, Accordion as Accordion$1, Skeleton as Skeleton$1, useButtonGroup, Center, ButtonGroup as ButtonGroup$1, Badge as Badge$1, Code as Code$1, Text, PopoverAnchor, PopoverContent, PopoverArrow, PopoverBody, FocusLock, Popover as Popover$1, PopoverTrigger, Portal, 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, Heading, CheckboxGroup as CheckboxGroup$1, List, ListItem, useColorModeValue, useFormControlProps, useFormControl, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, useColorMode, SkeletonCircle as SkeletonCircle$1, SkeletonText as SkeletonText$1, Breadcrumb as Breadcrumb$1, BreadcrumbItem as BreadcrumbItem$1, BreadcrumbLink as BreadcrumbLink$1, Drawer as Drawer$1, DrawerOverlay, DrawerBody, DrawerHeader, useMediaQuery, DrawerCloseButton, DarkMode, PopoverCloseButton, usePopoverContext, UnorderedList, ChakraProvider, useToast as useToast$1, useInterval } from '@chakra-ui/react';
 export { AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Box, Center, Collapse, Container, DarkMode, DrawerBody, DrawerCloseButton, DrawerFooter, DrawerOverlay, Fade, Flex, FormHelperText, Grid, GridItem, HStack, Image, Img, InputGroup, LightMode, 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 React85 from 'react';
@@ -887,6 +887,7 @@ var CardSelect = forwardRef(
     fontWeight = "normal",
     ...props
   }, externalRef) => {
+    var _a6;
     const label = "label" in props ? props.label : props["aria-label"];
     const internalRef = useRef(null);
     const triggerRef = externalRef ?? internalRef;
@@ -912,7 +913,6 @@ var CardSelect = forwardRef(
       {
         type: "button",
         ref: triggerRef,
-        fontWeight: "bold",
         sx: styles3.trigger,
         "aria-label": label,
         ...buttonProps,
@@ -932,17 +932,20 @@ var CardSelect = forwardRef(
         triggerRef,
         offset: size2 === "sm" ? 6 : 12,
         crossOffset,
-        placement
+        placement,
+        containerPadding: 0
       },
       /* @__PURE__ */ React85__default.createElement(
         StaticCard,
         {
           colorScheme: "white",
-          size: "lg",
+          size: "md",
+          fontSize: "xs",
           border: "sm",
-          borderColor: "grey",
+          borderColor: "silver",
           sx: styles3.card,
-          ...overlayProps
+          ...overlayProps,
+          maxWidth: (((_a6 = triggerRef.current) == null ? void 0 : _a6.clientWidth) ?? 1) * 2
         },
         /* @__PURE__ */ React85__default.createElement(Dialog, { "aria-label": label }, children)
       )
@@ -1841,7 +1844,7 @@ var texts4 = createTexts({
     sv: "Landskod"
   }
 });
-var LazyCountryCodeSelect = React85__default.lazy(() => import('./CountryCodeSelect-KKDPTYI3.mjs'));
+var LazyCountryCodeSelect = React85__default.lazy(() => import('./CountryCodeSelect-46H2DYJ5.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React85__default.createElement(Radio$1, { ...props, ref });
 });
@@ -1857,12 +1860,13 @@ var SearchInput = forwardRef(
     const formControlProps = useFormControlContext();
     const autoGeneratedId = useId();
     const inputId = props.id ?? (formControlProps == null ? void 0 : formControlProps.id) ?? autoGeneratedId;
-    return /* @__PURE__ */ React85__default.createElement(InputGroup, { position: "relative" }, /* @__PURE__ */ React85__default.createElement(InputLeftElement2, null, /* @__PURE__ */ React85__default.createElement(SearchOutline24Icon, null)), /* @__PURE__ */ React85__default.createElement(
+    const { outerProps, innerProps } = getOuterProps(props);
+    return /* @__PURE__ */ React85__default.createElement(InputGroup, { position: "relative", ...outerProps }, /* @__PURE__ */ React85__default.createElement(InputLeftElement2, null, /* @__PURE__ */ React85__default.createElement(SearchOutline24Icon, null)), /* @__PURE__ */ React85__default.createElement(
       Input$1,
       {
         paddingLeft: 7,
         paddingRight: 7,
-        ...props,
+        ...innerProps,
         id: inputId,
         type: "search",
         css: {
@@ -1888,6 +1892,19 @@ var SearchInput = forwardRef(
     )));
   }
 );
+var getOuterProps = (props) => {
+  const layoutKeys = /* @__PURE__ */ new Set(["w, width, maxW, minW, maxWidth, minWidth"]);
+  const outerProps = {};
+  const innerProps = {};
+  for (const key in props) {
+    if (layoutKeys.has(key)) {
+      outerProps[key] = props[key];
+    } else {
+      innerProps[key] = props[key];
+    }
+  }
+  return { outerProps, innerProps };
+};
 var texts5 = createTexts({
   label: {
     nb: "S\xF8k",
@@ -2448,7 +2465,16 @@ var texts7 = createTexts({
     en: `${value}% done`
   })
 });
-var Skeleton = forwardRef((props, ref) => /* @__PURE__ */ React85__default.createElement(Skeleton$1, { ...props, ref }));
+var Skeleton = forwardRef((props, ref) => /* @__PURE__ */ React85__default.createElement(
+  Skeleton$1,
+  {
+    ...props,
+    ref,
+    "aria-busy": "true",
+    "aria-hidden": "true",
+    role: "alert"
+  }
+));
 var SkeletonCircle = (props) => /* @__PURE__ */ React85__default.createElement(SkeletonCircle$1, { boxSize: 6, borderRadius: "50%", ...props });
 var SkeletonText = (props) => /* @__PURE__ */ React85__default.createElement(SkeletonText$1, { boxSize: 6, ...props });
 
@@ -4710,7 +4736,7 @@ var DrawerCloseButton2 = () => {
   const { onClose } = useModalContext();
   const { t: t2 } = useTranslation();
   const [isScreenSizeMinSm] = useMediaQuery(
-    `(min-width: ${tokens11__default.size.breakpoint.sm})`
+    `(min-width: ${tokens12__default.size.breakpoint.sm})`
   );
   if (isScreenSizeMinSm) {
     return /* @__PURE__ */ React85__default.createElement(
@@ -4720,8 +4746,7 @@ var DrawerCloseButton2 = () => {
         leftIcon: /* @__PURE__ */ React85__default.createElement(CloseFill24Icon, null),
         onClick: onClose,
         "aria-label": t2(texts22.close),
-        width: "fit-content",
-        marginLeft: "auto"
+        width: "fit-content"
       },
       t2(texts22.close)
     );
@@ -4740,7 +4765,7 @@ var DrawerBackButton = () => {
   const { onClose } = useModalContext();
   const { t: t2 } = useTranslation();
   const [isScreenSizeMinSm] = useMediaQuery(
-    `(min-width: ${tokens11__default.size.breakpoint.sm})`
+    `(min-width: ${tokens12__default.size.breakpoint.sm})`
   );
   if (isScreenSizeMinSm) {
     return /* @__PURE__ */ React85__default.createElement(
@@ -4750,8 +4775,7 @@ var DrawerBackButton = () => {
         leftIcon: /* @__PURE__ */ React85__default.createElement(ArrowLeftFill24Icon, null),
         onClick: onClose,
         "aria-label": t2(texts22.backAriaLabel),
-        width: "fit-content",
-        marginLeft: "auto"
+        width: "fit-content"
       },
       t2(texts22.back)
     );
@@ -9650,10 +9674,10 @@ var variantGhost = defineStyle((props) => {
 });
 var variantOutline3 = defineStyle((props) => {
   const { colorScheme: c } = props;
-  const borderColor = mode(`gray.200`, `whiteAlpha.300`)(props);
+  const borderColor2 = mode(`gray.200`, `whiteAlpha.300`)(props);
   return {
     border: "1px solid",
-    borderColor: c === "gray" ? borderColor : "currentColor",
+    borderColor: c === "gray" ? borderColor2 : "currentColor",
     ".chakra-button__group[data-attached][data-orientation=horizontal] > &:not(:last-of-type)": { marginEnd: "-1px" },
     ".chakra-button__group[data-attached][data-orientation=vertical] > &:not(:last-of-type)": { marginBottom: "-1px" },
     ...runIfFn(variantGhost, props)
@@ -10599,8 +10623,8 @@ function ghostBackground(state2, props) {
     case "selected": {
       return {
         backgroundColor: mode(
-          "ghost.surface.selected.light",
-          "ghost.surface.selected.dark"
+          "ghost.surface.hover.light",
+          "ghost.surface.hover.dark"
         )(props)
       };
     }
@@ -10812,10 +10836,14 @@ var config4 = helpers3.defineMultiStyleConfig({
       },
       container: {
         _hover: {
+          backgroundColor: "cloudy",
           outlineColor: "sky"
         },
         _active: {
           backgroundColor: "icyBlue"
+        },
+        _focus: {
+          outlineColor: "greenHaze"
         }
       }
     },
@@ -10825,10 +10853,14 @@ var config4 = helpers3.defineMultiStyleConfig({
       },
       container: {
         _hover: {
+          backgroundColor: "coralGreen",
           outlineColor: "blueGreen"
         },
         _active: {
           backgroundColor: "mint"
+        },
+        _focus: {
+          outlineColor: "greenHaze"
         }
       }
     },
@@ -10838,7 +10870,11 @@ var config4 = helpers3.defineMultiStyleConfig({
       },
       container: {
         _hover: {
-          outlineColor: "sunshine"
+          backgroundColor: "primrose",
+          outlineColor: "banana"
+        },
+        _focus: {
+          outlineColor: "greenHaze"
         },
         _active: {
           backgroundColor: "cornSilk"
@@ -10851,8 +10887,12 @@ var config4 = helpers3.defineMultiStyleConfig({
       },
       container: {
         _hover: {
+          backgroundColor: "burntYellow",
           outlineColor: "golden"
         },
+        _focus: {
+          outlineColor: "greenHaze"
+        },
         _active: {
           backgroundColor: "sunshine"
         }
@@ -10864,10 +10904,14 @@ var config4 = helpers3.defineMultiStyleConfig({
       },
       container: {
         _hover: {
+          backgroundColor: "salmon",
           outlineColor: "apricot"
         },
         _active: {
           backgroundColor: "pink"
+        },
+        _focus: {
+          outlineColor: "greenHaze"
         }
       }
     },
@@ -10953,10 +10997,14 @@ var config5 = helpers4.defineMultiStyleConfig({
     service: {
       container: {
         _hover: {
-          outlineColor: "blueGreen"
+          backgroundColor: "teal.600",
+          outlineColor: "teal.600"
+        },
+        _focus: {
+          outlineColor: "green.500"
         },
         _active: {
-          backgroundColor: "pine",
+          backgroundColor: "teal.400",
           outlineColor: "pine"
         },
         color: "white"
@@ -11273,9 +11321,258 @@ var config7 = defineStyleConfig$1({
   }
 });
 var button_default = config7;
+
+// src/theme/foundations/index.ts
+var foundations_exports = {};
+__export(foundations_exports, {
+  borders: () => borders2,
+  breakpoints: () => breakpoints2,
+  colors: () => colors2,
+  config: () => config8,
+  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: `${tokens12__default.size.stroke.sm} solid`,
+  "sm-dashed": `${tokens12__default.size.stroke.sm} dashed`,
+  md: `${tokens12__default.size.stroke.md} solid`,
+  "md-dashed": `${tokens12__default.size.stroke.md} dashed`,
+  lg: `${tokens12__default.size.stroke.lg} solid`,
+  "lg-dashed": `${tokens12__default.size.stroke.lg} dashed`
+};
+var breakpoints2 = {
+  base: "0px",
+  sm: tokens12__default.size.breakpoint.sm,
+  md: tokens12__default.size.breakpoint.md,
+  lg: tokens12__default.size.breakpoint.lg,
+  xl: tokens12__default.size.breakpoint.xl,
+  "2xl": tokens12__default.size.breakpoint.xl
+};
+var colors2 = {
+  ...tokens12__default.color.alias,
+  ...tokens12__default.color.palette,
+  ...tokens12__default.color.vyDigital,
+  linjetag: tokens12__default.color.linjetag
+};
+
+// src/theme/foundations/config.ts
+var config8 = {
+  cssVarPrefix: "spor",
+  initialColorMode: "light",
+  useSystemColorMode: false
+};
+var fonts = {
+  body: `${tokens12__default.font.family.body}, arial, sans-serif`,
+  heading: `${tokens12__default.font.family.heading}, arial, sans-serif`,
+  mono: `${tokens12__default.font.family.monospace}, monospace`
+};
+var fontSizes = {
+  "2xs": tokens12__default.size.font.xs.mobile,
+  xs: tokens12__default.size.font.sm.mobile,
+  sm: tokens12__default.size.font.md.mobile,
+  md: tokens12__default.size.font.lg.mobile,
+  lg: tokens12__default.size.font.xl.mobile,
+  xl: tokens12__default.size.font.xxl.mobile,
+  "2xl": tokens12__default.size.font.xl.desktop,
+  "3xl": tokens12__default.size.font.xxl.desktop,
+  mobile: {
+    xs: tokens12__default.size.font.xs.mobile,
+    sm: tokens12__default.size.font.sm.mobile,
+    md: tokens12__default.size.font.md.mobile,
+    lg: tokens12__default.size.font.lg.mobile,
+    xl: tokens12__default.size.font.xl.mobile,
+    xxl: tokens12__default.size.font.xxl.mobile
+  },
+  desktop: {
+    xs: tokens12__default.size.font.xs.desktop,
+    sm: tokens12__default.size.font.sm.desktop,
+    md: tokens12__default.size.font.md.desktop,
+    lg: tokens12__default.size.font.lg.desktop,
+    xl: tokens12__default.size.font.xl.desktop,
+    xxl: tokens12__default.size.font.xxl.desktop
+  }
+};
+
+// src/theme/foundations/fontWeights.ts
+var fontWeights = {
+  light: 300,
+  medium: 400,
+  bold: 700
+};
+var lineHeights = {
+  base: tokens12__default.font.style.lg["line-height"],
+  normal: tokens12__default.font.style.lg["line-height"]
+};
+var radii2 = {
+  none: tokens12__default.size["border-radius"].none,
+  xs: tokens12__default.size["border-radius"].xs,
+  sm: tokens12__default.size["border-radius"].sm,
+  md: tokens12__default.size["border-radius"].md,
+  lg: tokens12__default.size["border-radius"].lg,
+  xl: tokens12__default.size["border-radius"].xl,
+  "2xl": tokens12__default.size["border-radius"]["2xl"],
+  round: "50%"
+};
+var shadows2 = {
+  none: "none",
+  sm: tokens12__default.depth.shadow.sm.value,
+  md: tokens12__default.depth.shadow.md.value,
+  lg: tokens12__default.depth.shadow.lg.value
+};
+var spacing2 = Object.entries(tokens12__default.size.spacing).reduce(
+  (tokens17, [key, token]) => ({
+    ...tokens17,
+    [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 = {
+  base: "0px",
+  sm: tokens12__default.size.breakpoint.sm,
+  md: tokens12__default.size.breakpoint.md,
+  lg: tokens12__default.size.breakpoint.lg,
+  xl: tokens12__default.size.breakpoint.xl
+};
+var sizes24 = {
+  ...spacing2,
+  ...largeSizes2,
+  container: container2
+};
+var textStyles = {
+  "2xl": {
+    fontSize: [
+      tokens12__default.font.style.xxl["font-size"].mobile,
+      null,
+      null,
+      tokens12__default.font.style.xxl["font-size"].desktop
+    ],
+    fontFamily: tokens12__default.font.style.xxl["font-family"],
+    lineHeight: tokens12__default.font.style.xxl["line-height"]
+  },
+  "xl-display": {
+    fontSize: [
+      tokens12__default.font.style["xl-display"]["font-size"].mobile,
+      null,
+      null,
+      tokens12__default.font.style["xl-display"]["font-size"].desktop
+    ],
+    fontFamily: tokens12__default.font.style["xl-display"]["font-family"],
+    lineHeight: tokens12__default.font.style["xl-display"]["line-height"]
+  },
+  "xl-sans": {
+    fontSize: [
+      tokens12__default.font.style["xl-sans"]["font-size"].mobile,
+      null,
+      null,
+      tokens12__default.font.style["xl-sans"]["font-size"].desktop
+    ],
+    fontFamily: tokens12__default.font.style["xl-sans"]["font-family"],
+    lineHeight: tokens12__default.font.style["xl-sans"]["line-height"]
+  },
+  lg: {
+    fontSize: [
+      tokens12__default.font.style.lg["font-size"].mobile,
+      null,
+      null,
+      tokens12__default.font.style.lg["font-size"].desktop
+    ],
+    fontFamily: tokens12__default.font.style.lg["font-family"],
+    lineHeight: tokens12__default.font.style.lg["line-height"]
+  },
+  md: {
+    fontSize: [
+      tokens12__default.font.style.md["font-size"].mobile,
+      null,
+      null,
+      tokens12__default.font.style.md["font-size"].desktop
+    ],
+    fontFamily: tokens12__default.font.style.md["font-family"],
+    lineHeight: tokens12__default.font.style.md["line-height"]
+  },
+  sm: {
+    fontSize: [
+      tokens12__default.font.style.sm["font-size"].mobile,
+      null,
+      null,
+      tokens12__default.font.style.sm["font-size"].desktop
+    ],
+    fontFamily: tokens12__default.font.style.sm["font-family"],
+    lineHeight: tokens12__default.font.style.sm["line-height"]
+  },
+  xs: {
+    fontSize: [
+      tokens12__default.font.style.xs["font-size"].mobile,
+      null,
+      null,
+      tokens12__default.font.style.xs["font-size"].desktop
+    ],
+    fontFamily: tokens12__default.font.style.xs["font-family"],
+    lineHeight: tokens12__default.font.style.xs["line-height"]
+  }
+};
+var zIndices2 = {
+  hide: tokens12__default.depth["z-index"].hide,
+  auto: "auto",
+  base: tokens12__default.depth["z-index"].base,
+  docked: tokens12__default.depth["z-index"].docked,
+  dropdown: tokens12__default.depth["z-index"].dropdown,
+  sticky: tokens12__default.depth["z-index"].sticky,
+  banner: tokens12__default.depth["z-index"].banner,
+  overlay: tokens12__default.depth["z-index"].overlay,
+  modal: tokens12__default.depth["z-index"].modal,
+  popover: tokens12__default.depth["z-index"].popover,
+  skipLink: tokens12__default.depth["z-index"].skipLink,
+  toast: tokens12__default.depth["z-index"].toast,
+  tooltip: tokens12__default.depth["z-index"].tooltip
+};
+var styles2 = {
+  global: (props) => ({
+    "html, body": {
+      color: mode("darkGrey", "lightGrey")(props)
+    },
+    svg: {
+      display: "initial"
+    }
+  })
+};
+
+// src/theme/components/card-select.ts
 var parts4 = anatomy("card-select").parts("trigger", "card");
 var helpers5 = createMultiStyleConfigHelpers(parts4.keys);
-var config8 = helpers5.defineMultiStyleConfig({
+var config9 = helpers5.defineMultiStyleConfig({
   baseStyle: (props) => ({
     trigger: {
       appearance: "none",
@@ -11288,8 +11585,8 @@ var config8 = helpers5.defineMultiStyleConfig({
     },
     card: {
       borderRadius: "sm",
-      boxShadow: "md",
-      padding: 3,
+      boxShadow: "xs",
+      padding: 2,
       ...baseText("default", props),
       backgroundColor: mode(
         "white",
@@ -11322,7 +11619,8 @@ var config8 = helpers5.defineMultiStyleConfig({
           ...ghostBackground("active", props)
         },
         _expanded: {
-          ...ghostBackground("selected", props)
+          ...ghostBackground("active", props),
+          fontWeight: fontWeights.bold
         }
       }
     }),
@@ -11354,7 +11652,7 @@ var config8 = helpers5.defineMultiStyleConfig({
         paddingY: 1,
         minHeight: "1.25rem",
         fontSize: "xs",
-        borderRadius: "sm"
+        borderRadius: "lg"
       }
     },
     md: {
@@ -11362,8 +11660,8 @@ var config8 = helpers5.defineMultiStyleConfig({
         paddingX: 2,
         paddingY: 1.5,
         minHeight: "2.625rem",
-        fontSize: "sm",
-        borderRadius: "sm"
+        fontSize: "xs",
+        borderRadius: "lg"
       }
     },
     lg: {
@@ -11372,14 +11670,14 @@ var config8 = helpers5.defineMultiStyleConfig({
         paddingY: 2,
         minHeight: "3.375rem",
         fontSize: "sm",
-        borderRadius: "sm"
+        borderRadius: "lg"
       }
     }
   }
 });
-var card_select_default = config8;
+var card_select_default = config9;
 var helpers6 = createMultiStyleConfigHelpers$1(checkboxAnatomy.keys);
-var config9 = helpers6.defineMultiStyleConfig({
+var config10 = helpers6.defineMultiStyleConfig({
   baseStyle: (props) => ({
     container: {
       _hover: {
@@ -11450,10 +11748,10 @@ var config9 = helpers6.defineMultiStyleConfig({
     }
   })
 });
-var checkbox_default = config9;
+var checkbox_default = config10;
 var parts5 = anatomy$1("choice-chip").parts("container", "icon", "label");
 var helpers7 = createMultiStyleConfigHelpers$1(parts5.keys);
-var config10 = helpers7.defineMultiStyleConfig({
+var config11 = helpers7.defineMultiStyleConfig({
   baseStyle: (props) => ({
     container: {
       display: "inline-flex",
@@ -11600,9 +11898,9 @@ var config10 = helpers7.defineMultiStyleConfig({
     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],
@@ -11641,9 +11939,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"],
@@ -11653,255 +11951,7 @@ var config12 = defineStyleConfig$1({
   variants: variants13,
   defaultProps: defaultProps2
 });
-var code_default = config12;
-
-// src/theme/foundations/index.ts
-var foundations_exports = {};
-__export(foundations_exports, {
-  borders: () => borders2,
-  breakpoints: () => breakpoints2,
-  colors: () => colors2,
-  config: () => config13,
-  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: `${tokens11__default.size.stroke.sm} solid`,
-  "sm-dashed": `${tokens11__default.size.stroke.sm} dashed`,
-  md: `${tokens11__default.size.stroke.md} solid`,
-  "md-dashed": `${tokens11__default.size.stroke.md} dashed`,
-  lg: `${tokens11__default.size.stroke.lg} solid`,
-  "lg-dashed": `${tokens11__default.size.stroke.lg} dashed`
-};
-var breakpoints2 = {
-  base: "0px",
-  sm: tokens11__default.size.breakpoint.sm,
-  md: tokens11__default.size.breakpoint.md,
-  lg: tokens11__default.size.breakpoint.lg,
-  xl: tokens11__default.size.breakpoint.xl,
-  "2xl": tokens11__default.size.breakpoint.xl
-};
-var colors2 = {
-  ...tokens11__default.color.alias,
-  ...tokens11__default.color.palette,
-  ...tokens11__default.color.vyDigital,
-  linjetag: tokens11__default.color.linjetag
-};
-
-// src/theme/foundations/config.ts
-var config13 = {
-  cssVarPrefix: "spor",
-  initialColorMode: "light",
-  useSystemColorMode: false
-};
-var fonts = {
-  body: `${tokens11__default.font.family.body}, arial, sans-serif`,
-  heading: `${tokens11__default.font.family.heading}, arial, sans-serif`,
-  mono: `${tokens11__default.font.family.monospace}, monospace`
-};
-var fontSizes = {
-  "2xs": tokens11__default.size.font.xs.mobile,
-  xs: tokens11__default.size.font.sm.mobile,
-  sm: tokens11__default.size.font.md.mobile,
-  md: tokens11__default.size.font.lg.mobile,
-  lg: tokens11__default.size.font.xl.mobile,
-  xl: tokens11__default.size.font.xxl.mobile,
-  "2xl": tokens11__default.size.font.xl.desktop,
-  "3xl": tokens11__default.size.font.xxl.desktop,
-  mobile: {
-    xs: tokens11__default.size.font.xs.mobile,
-    sm: tokens11__default.size.font.sm.mobile,
-    md: tokens11__default.size.font.md.mobile,
-    lg: tokens11__default.size.font.lg.mobile,
-    xl: tokens11__default.size.font.xl.mobile,
-    xxl: tokens11__default.size.font.xxl.mobile
-  },
-  desktop: {
-    xs: tokens11__default.size.font.xs.desktop,
-    sm: tokens11__default.size.font.sm.desktop,
-    md: tokens11__default.size.font.md.desktop,
-    lg: tokens11__default.size.font.lg.desktop,
-    xl: tokens11__default.size.font.xl.desktop,
-    xxl: tokens11__default.size.font.xxl.desktop
-  }
-};
-
-// src/theme/foundations/fontWeights.ts
-var fontWeights = {
-  light: 300,
-  medium: 400,
-  bold: 700
-};
-var lineHeights = {
-  base: tokens11__default.font.style.lg["line-height"],
-  normal: tokens11__default.font.style.lg["line-height"]
-};
-var radii2 = {
-  none: tokens11__default.size["border-radius"].none,
-  xs: tokens11__default.size["border-radius"].xs,
-  sm: tokens11__default.size["border-radius"].sm,
-  md: tokens11__default.size["border-radius"].md,
-  lg: tokens11__default.size["border-radius"].lg,
-  xl: tokens11__default.size["border-radius"].xl,
-  "2xl": tokens11__default.size["border-radius"]["2xl"],
-  round: "50%"
-};
-var shadows2 = {
-  none: "none",
-  sm: tokens11__default.depth.shadow.sm.value,
-  md: tokens11__default.depth.shadow.md.value,
-  lg: tokens11__default.depth.shadow.lg.value
-};
-var spacing2 = Object.entries(tokens11__default.size.spacing).reduce(
-  (tokens16, [key, token]) => ({
-    ...tokens16,
-    [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: [
-      tokens11__default.font.style.xxl["font-size"].mobile,
-      null,
-      null,
-      tokens11__default.font.style.xxl["font-size"].desktop
-    ],
-    fontFamily: tokens11__default.font.style.xxl["font-family"],
-    lineHeight: tokens11__default.font.style.xxl["line-height"]
-  },
-  "xl-display": {
-    fontSize: [
-      tokens11__default.font.style["xl-display"]["font-size"].mobile,
-      null,
-      null,
-      tokens11__default.font.style["xl-display"]["font-size"].desktop
-    ],
-    fontFamily: tokens11__default.font.style["xl-display"]["font-family"],
-    lineHeight: tokens11__default.font.style["xl-display"]["line-height"]
-  },
-  "xl-sans": {
-    fontSize: [
-      tokens11__default.font.style["xl-sans"]["font-size"].mobile,
-      null,
-      null,
-      tokens11__default.font.style["xl-sans"]["font-size"].desktop
-    ],
-    fontFamily: tokens11__default.font.style["xl-sans"]["font-family"],
-    lineHeight: tokens11__default.font.style["xl-sans"]["line-height"]
-  },
-  lg: {
-    fontSize: [
-      tokens11__default.font.style.lg["font-size"].mobile,
-      null,
-      null,
-      tokens11__default.font.style.lg["font-size"].desktop
-    ],
-    fontFamily: tokens11__default.font.style.lg["font-family"],
-    lineHeight: tokens11__default.font.style.lg["line-height"]
-  },
-  md: {
-    fontSize: [
-      tokens11__default.font.style.md["font-size"].mobile,
-      null,
-      null,
-      tokens11__default.font.style.md["font-size"].desktop
-    ],
-    fontFamily: tokens11__default.font.style.md["font-family"],
-    lineHeight: tokens11__default.font.style.md["line-height"]
-  },
-  sm: {
-    fontSize: [
-      tokens11__default.font.style.sm["font-size"].mobile,
-      null,
-      null,
-      tokens11__default.font.style.sm["font-size"].desktop
-    ],
-    fontFamily: tokens11__default.font.style.sm["font-family"],
-    lineHeight: tokens11__default.font.style.sm["line-height"]
-  },
-  xs: {
-    fontSize: [
-      tokens11__default.font.style.xs["font-size"].mobile,
-      null,
-      null,
-      tokens11__default.font.style.xs["font-size"].desktop
-    ],
-    fontFamily: tokens11__default.font.style.xs["font-family"],
-    lineHeight: tokens11__default.font.style.xs["line-height"]
-  }
-};
-var zIndices2 = {
-  hide: tokens11__default.depth["z-index"].hide,
-  auto: "auto",
-  base: tokens11__default.depth["z-index"].base,
-  docked: tokens11__default.depth["z-index"].docked,
-  dropdown: tokens11__default.depth["z-index"].dropdown,
-  sticky: tokens11__default.depth["z-index"].sticky,
-  banner: tokens11__default.depth["z-index"].banner,
-  overlay: tokens11__default.depth["z-index"].overlay,
-  modal: tokens11__default.depth["z-index"].modal,
-  popover: tokens11__default.depth["z-index"].popover,
-  skipLink: tokens11__default.depth["z-index"].skipLink,
-  toast: tokens11__default.depth["z-index"].toast,
-  tooltip: tokens11__default.depth["z-index"].tooltip
-};
-var styles2 = {
-  global: (props) => ({
-    "html, body": {
-      color: mode("darkGrey", "lightGrey")(props)
-    },
-    svg: {
-      display: "initial"
-    }
-  })
-};
-
-// src/theme/components/datepicker.ts
+var code_default = config13;
 var parts6 = anatomy$1("datepicker").parts(
   "wrapper",
   "calendarTriggerButton",
@@ -12082,40 +12132,45 @@ var config14 = helpers8.defineMultiStyleConfig({
   }
 });
 var datepicker_default = config14;
-var isSolid = (props) => props.variant === "solid";
-var isDashed = (props) => props.variant === "dashed";
+var borderColor = mode("blackAlpha.300", "whiteAlpha.300");
+function getSizes(size2) {
+  const sizes25 = {
+    sm: {
+      height: "1px",
+      dash: "1px",
+      gap: "4px"
+    },
+    md: {
+      height: "2px",
+      dash: "3px",
+      gap: "6px"
+    },
+    lg: {
+      height: "3px",
+      dash: "3px",
+      gap: "9px"
+    }
+  };
+  return sizes25[size2] || sizes25["md"];
+}
 var divider_default = defineStyleConfig({
   baseStyle: (props) => ({
-    borderColor: mode("blackAlpha.300", "whiteAlpha.300")(props)
+    borderColor: borderColor(props)
   }),
   variants: {
     solid: {
       borderStyle: "solid"
     },
-    dashed: (props) => ({
-      backgroundImage: `repeating-linear-gradient(90deg, ${mode("blackAlpha.300", "whiteAlpha.300")(props)}, ${mode("blackAlpha.300", "whiteAlpha.300")(props)} 4px, transparent 4px, transparent 10px)`,
-      backgroundPosition: "left bottom",
-      backgroundRepeat: "repeat-x",
-      backgroundSize: "100% 3px",
-      borderRadius: props.size === "sm" ? "0.5px" : props.size === "md" ? "1px" : "1.5px"
-    })
-  },
-  sizes: {
-    sm: (props) => ({
-      borderWidth: isSolid(props) ? "1px" : void 0,
-      borderRadius: isSolid(props) ? "0.5px" : void 0,
-      height: isDashed(props) ? "1px" : void 0
-    }),
-    md: (props) => ({
-      borderWidth: isSolid(props) ? "2px" : void 0,
-      borderRadius: isSolid(props) ? "1px" : "10px",
-      height: isDashed(props) ? "2px" : void 0
-    }),
-    lg: (props) => ({
-      borderWidth: isSolid(props) ? "3px" : void 0,
-      borderRadius: isSolid(props) ? "1.5px" : void 0,
-      height: isDashed(props) ? "3px" : void 0
-    })
+    dashed: (props) => {
+      const { height, dash, gap } = getSizes(props.size);
+      return {
+        height,
+        backgroundImage: `linear-gradient(90deg, ${borderColor(props)}, ${borderColor(props)} ${dash}, transparent ${dash}, transparent ${gap})`,
+        backgroundPosition: "left bottom",
+        backgroundRepeat: "repeat-x",
+        backgroundSize: `${gap} ${height}`
+      };
+    }
   },
   defaultProps: {
     variant: "solid",
@@ -12468,7 +12523,7 @@ var config20 = helpers13.defineMultiStyleConfig({
       transitionDuration: "fast",
       transitionProperty: "common",
       _disabled: {
-        backgroundColor: "silver"
+        ...surface("disabled", props)
       },
       "button&, a&": {
         boxShadow: "sm",
@@ -12485,8 +12540,7 @@ var config20 = helpers13.defineMultiStyleConfig({
     iconContainer: {
       padding: 0.5,
       "[aria-disabled=true] &": {
-        backgroundColor: "osloGrey",
-        color: "white"
+        ...surface("disabled", props)
       }
     },
     textContainer: {
@@ -12494,7 +12548,7 @@ var config20 = helpers13.defineMultiStyleConfig({
       paddingRight: 0.5,
       whiteSpace: "nowrap",
       "[aria-disabled=true] &": {
-        color: "dimGrey"
+        ...baseText("disabled", props)
       }
     },
     title: {
@@ -12893,7 +12947,10 @@ var config23 = helpers16.defineMultiStyleConfig({
       alignItems: "center"
     },
     icon: {
-      color: "white"
+      color: "white",
+      "[aria-disabled=true] &": {
+        color: mode("icon.disabled.light", "icon.disabled.dark")
+      }
     }
   },
   variants: {
@@ -14510,7 +14567,7 @@ var config44 = defineStyleConfig$1({
 var pressable_card_default = config44;
 var fontFaces = `
 @font-face {
-  font-family: ${tokens11__default.asset.font["vy-sans"]["light"].name};
+  font-family: ${tokens12__default.asset.font["vy-sans"]["light"].name};
   src: url("https://www.vy.no/styles/font/VySans-Light.woff2") format("woff2"),
     url("https://www.vy.no/styles/font/VySans-Light.woff") format("woff");
   font-style: normal;
@@ -14518,7 +14575,7 @@ var fontFaces = `
   font-display: swap
 }
 @font-face {
-  font-family: ${tokens11__default.asset.font["vy-sans"]["light-italic"].name};
+  font-family: ${tokens12__default.asset.font["vy-sans"]["light-italic"].name};
   src: url("https://www.vy.no/styles/font/VySans-LightItalic.woff2")
       format("woff2"),
     url("https://www.vy.no/styles/font/VySans-LightItalic.woff") format("woff");
@@ -14527,7 +14584,7 @@ var fontFaces = `
   font-display: swap
 }
 @font-face {
-  font-family: ${tokens11__default.asset.font["vy-sans"]["medium"].name};
+  font-family: ${tokens12__default.asset.font["vy-sans"]["medium"].name};
   src: url("https://www.vy.no/styles/font/VySans-Regular.woff2") format("woff2"),
     url("https://www.vy.no/styles/font/VySans-Regular.woff") format("woff");
   font-style: normal;
@@ -14535,7 +14592,7 @@ var fontFaces = `
   font-display: swap
 }
 @font-face {
-  font-family: ${tokens11__default.asset.font["vy-sans"]["medium-italic"].name};
+  font-family: ${tokens12__default.asset.font["vy-sans"]["medium-italic"].name};
   src: url("https://www.vy.no/styles/font/VySans-RegularItalic.woff2")
       format("woff2"),
     url("https://www.vy.no/styles/font/VySans-RegularItalic.woff")
@@ -14545,7 +14602,7 @@ var fontFaces = `
   font-display: swap
 }
 @font-face {
-  font-family: ${tokens11__default.asset.font["vy-sans"]["bold"].name};
+  font-family: ${tokens12__default.asset.font["vy-sans"]["bold"].name};
   src: url("https://www.vy.no/styles/font/VySans-Bold.woff2") format("woff2"),
     url("https://www.vy.no/styles/font/VySans-Bold.woff") format("woff");
   font-style: normal;
@@ -14553,7 +14610,7 @@ var fontFaces = `
   font-display: swap
 }
 @font-face {
-  font-family: ${tokens11__default.asset.font["vy-sans"]["bold-italic"].name};
+  font-family: ${tokens12__default.asset.font["vy-sans"]["bold-italic"].name};
   src: url("https://www.vy.no/styles/font/VySans-BoldItalic.woff2")
       format("woff2"),
     url("https://www.vy.no/styles/font/VySans-BoldItalic.woff") format("woff");
@@ -14562,7 +14619,7 @@ var fontFaces = `
   font-display: swap
 }
 @font-face {
-  font-family: ${tokens11__default.asset.font["vy-display"].name};
+  font-family: ${tokens12__default.asset.font["vy-display"].name};
   src: url("https://www.vy.no/styles/font/VyDisplay-Medium.woff2")
       format("woff2"),
     url("https://www.vy.no/styles/font/VyDisplay-Medium.woff") format("woff");
@@ -14607,7 +14664,7 @@ var brandTheme = {
     }
   },
   ["CargoNet" /* CargoNet */]: {
-    colors: tokens11__default.color.cargonet
+    colors: tokens12__default.color.cargonet
   }
 };
 var BaseToast = ({ children, variant, id }) => {