@vygruppen/spor-react 3.2.0 → 3.3.1

package/dist/{chunk-QOZMDFH3.mjs → chunk-5JEY3QEF.mjs}

@@ -1,4 +1,4 @@
-import { forwardRef, Accordion as Accordion$1, Skeleton as Skeleton$1, useButtonGroup, Button as Button$1, Box, Center, ButtonGroup as ButtonGroup$1, IconButton as IconButton$1, Stack as Stack$1, useStyleConfig, Badge as Badge$1, Code as Code$1, Text, useMultiStyleConfig, FormLabel, Flex, useFormControlContext, useBreakpointValue, Popover, InputGroup, PopoverAnchor, Portal, PopoverContent, PopoverArrow, PopoverBody, chakra, Checkbox as Checkbox$1, useCheckbox, FormControl as FormControl$1, InputLeftElement, Input as Input$1, InputRightElement, Select, useDisclosure, useControllableState, Radio as Radio$1, RadioGroup as RadioGroup$1, Switch as Switch$1, Textarea as Textarea$1, Link, ModalHeader as ModalHeader$1, useModalContext, DrawerContent as DrawerContent$1, Tabs as Tabs$1, Table as Table$1, defineStyleConfig as defineStyleConfig$1, createMultiStyleConfigHelpers as createMultiStyleConfigHelpers$1, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, SkeletonCircle as SkeletonCircle$1, SkeletonText as SkeletonText$1, Heading as Heading$1, CheckboxGroup as CheckboxGroup$1, List, ListItem, useColorModeValue, useFormControlProps, useFormControl, Drawer as Drawer$1, DrawerOverlay, DrawerCloseButton, DrawerBody, usePopoverContext, DarkMode, PopoverTrigger, PopoverCloseButton, ChakraProvider, HStack, useToast as useToast$1, useInterval } from '@chakra-ui/react';
+import { forwardRef, Box, Stack as Stack$1, Accordion as Accordion$1, Skeleton as Skeleton$1, useButtonGroup, Button as Button$1, Center, ButtonGroup as ButtonGroup$1, IconButton as IconButton$1, useStyleConfig, Badge as Badge$1, Code as Code$1, Text, useMultiStyleConfig, PopoverAnchor, FormLabel, Flex, useFormControlContext, useBreakpointValue, 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, useControllableState, Radio as Radio$1, RadioGroup as RadioGroup$1, Switch as Switch$1, Textarea as Textarea$1, Link, ModalHeader as ModalHeader$1, useModalContext, DrawerContent as DrawerContent$1, Tabs as Tabs$1, Table as Table$1, defineStyleConfig as defineStyleConfig$1, createMultiStyleConfigHelpers as createMultiStyleConfigHelpers$1, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, SkeletonCircle as SkeletonCircle$1, SkeletonText as SkeletonText$1, Heading as Heading$1, CheckboxGroup as CheckboxGroup$1, List, ListItem, useColorModeValue, useFormControlProps, useFormControl, Drawer as Drawer$1, DrawerOverlay, DrawerCloseButton, DrawerBody, usePopoverContext, DarkMode, PopoverCloseButton, ChakraProvider, HStack, useToast as useToast$1, useInterval } from '@chakra-ui/react';
 export { AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Box, Center, Collapse, Container, DarkMode, DrawerBody, DrawerCloseButton, DrawerFooter, DrawerOverlay, Fade, Flex, FormHelperText, Grid, GridItem, HStack, Image, Img, InputGroup, LightMode, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalOverlay, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, ScaleFade, SimpleGrid, Slide, SlideFade, Spacer, Tab, TabList, TabPanel, TabPanels, TableCaption, Tbody, Td, Tfoot, Th, Thead, Tr, VStack, Wrap, WrapItem, extendTheme, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToken } from '@chakra-ui/react';
 import tokens10__default from '@vygruppen/spor-design-tokens';
 import * as tokens10 from '@vygruppen/spor-design-tokens';
@@ -769,6 +769,26 @@ var require_lodash = __commonJS({
     module.exports = mergeWith5;
   }
 });
+var Divider = forwardRef((props, ref) => {
+  return /* @__PURE__ */ React49__default.createElement(
+    Box,
+    {
+      as: "hr",
+      height: "2px",
+      border: "0",
+      borderRadius: "1px",
+      backgroundColor: "blackAlpha.200",
+      width: "100%",
+      ...props,
+      ref
+    }
+  );
+});
+var Stack = forwardRef(
+  ({ flexDirection, ...props }, ref) => {
+    return /* @__PURE__ */ React49__default.createElement(Stack$1, { ...props, direction: flexDirection, ref });
+  }
+);
 var AccordionContext = React49__default.createContext(null);
 var AccordionProvider = ({
   size: size2,
@@ -785,17 +805,20 @@ var useAccordionContext = () => {
   }
   return context;
 };
-var Accordion = forwardRef((props, ref) => {
-  const defaultIndex = typeof props.defaultIndex === "number" && props.allowMultiple ? [props.defaultIndex] : props.defaultIndex;
-  return /* @__PURE__ */ React49__default.createElement(AccordionProvider, { size: props.size }, /* @__PURE__ */ React49__default.createElement(
-    Accordion$1,
-    {
-      ...props,
-      ref,
-      defaultIndex
-    }
-  ));
-});
+var Accordion = forwardRef(
+  ({ children, spacing: spacing3 = 2, ...props }, ref) => {
+    const defaultIndex = typeof props.defaultIndex === "number" && props.allowMultiple ? [props.defaultIndex] : props.defaultIndex;
+    return /* @__PURE__ */ React49__default.createElement(AccordionProvider, { size: props.size }, /* @__PURE__ */ React49__default.createElement(
+      Accordion$1,
+      {
+        ...props,
+        ref,
+        defaultIndex
+      },
+      /* @__PURE__ */ React49__default.createElement(Stack, { spacing: spacing3 }, children)
+    ));
+  }
+);
 var Expandable = ({
   children,
   headingLevel,
@@ -823,7 +846,7 @@ var ExpandableItem = ({
 }) => {
   const { size: size2 } = useAccordionContext();
   warnAboutMismatchingIcon({ icon: leftIcon, size: size2 });
-  return /* @__PURE__ */ React49__default.createElement(AccordionItem, { ...rest }, /* @__PURE__ */ React49__default.createElement(Box, { as: headingLevel }, /* @__PURE__ */ React49__default.createElement(AccordionButton, null, /* @__PURE__ */ React49__default.createElement(Flex, { alignItems: "center" }, leftIcon && /* @__PURE__ */ React49__default.createElement(Box, { mr: 2 }, leftIcon), title), /* @__PURE__ */ React49__default.createElement(AccordionIcon, null))), /* @__PURE__ */ React49__default.createElement(AccordionPanel, null, children));
+  return /* @__PURE__ */ React49__default.createElement(AccordionItem, { ...rest }, /* @__PURE__ */ React49__default.createElement(Box, { as: headingLevel }, /* @__PURE__ */ React49__default.createElement(AccordionButton, null, /* @__PURE__ */ React49__default.createElement(Flex, { alignItems: "center" }, leftIcon && /* @__PURE__ */ React49__default.createElement(Box, { marginRight: 1 }, leftIcon), title), /* @__PURE__ */ React49__default.createElement(AccordionIcon, null))), /* @__PURE__ */ React49__default.createElement(AccordionPanel, null, children));
 };
 var warnAboutMismatchingIcon = ({ icon, size: size2 }) => {
   var _a6, _b5;
@@ -888,8 +911,8 @@ function useTranslation() {
   };
   return { t: t2, language };
 }
-function createTexts(texts23) {
-  return texts23;
+function createTexts(texts24) {
+  return texts24;
 }
 var hydrating = true;
 function useHydrated() {
@@ -1501,28 +1524,6 @@ var ExpandableAlert = ({
 var StaticAlert = ({ children, ...props }) => {
   return /* @__PURE__ */ React49__default.createElement(BaseAlert, { ...props }, /* @__PURE__ */ React49__default.createElement(AlertIcon, { variant: props.variant }), children);
 };
-var Divider = forwardRef((props, ref) => {
-  return /* @__PURE__ */ React49__default.createElement(
-    Box,
-    {
-      as: "hr",
-      height: "2px",
-      border: "0",
-      borderRadius: "1px",
-      backgroundColor: "blackAlpha.200",
-      width: "100%",
-      ...props,
-      ref
-    }
-  );
-});
-var Stack = forwardRef(
-  ({ flexDirection, ...props }, ref) => {
-    return /* @__PURE__ */ React49__default.createElement(Stack$1, { ...props, direction: flexDirection, ref });
-  }
-);
-
-// src/card/Card.tsx
 var Card = forwardRef(
   ({ size: size2 = "sm", colorScheme = "white", children, ...props }, ref) => {
     const styles2 = useStyleConfig("Card", {
@@ -3290,7 +3291,14 @@ var Text4 = forwardRef(
 );
 function CalendarCell({ state: state2, date, currentMonth }) {
   const ref = useRef(null);
-  const { cellProps, buttonProps, isSelected, isDisabled, isUnavailable } = useCalendarCell({ date }, state2, ref);
+  const {
+    cellProps,
+    buttonProps,
+    isSelected,
+    isDisabled,
+    isUnavailable,
+    isOutsideVisibleRange
+  } = useCalendarCell({ date }, state2, ref);
   const isOutsideMonth = !isSameMonth(currentMonth, date);
   const styles2 = useMultiStyleConfig("Datepicker", {});
   const stateProps = {};
@@ -3338,6 +3346,7 @@ function CalendarCell({ state: state2, date, currentMonth }) {
         ...stateProps,
         ref,
         sx: styles2.dateCell,
+        hidden: isOutsideVisibleRange,
         width: "100%"
       },
       date.day
@@ -3348,15 +3357,15 @@ var useCurrentLocale = () => {
   const { language } = useTranslation();
   switch (language) {
     case "nb":
-      return "no";
+      return "nb-NO";
     case "nn":
-      return "no";
+      return "nb-NO";
     case "sv":
-      return "sv";
+      return "sv-SE";
     case "en":
       return "en-GB";
     default:
-      return "no";
+      return "nb-NO";
   }
 };
 var getCurrentTime = () => {
@@ -3541,6 +3550,7 @@ var texts7 = createTexts({
 
 // src/datepicker/Calendar.tsx
 function Calendar({ showYearNavigation, ...props }) {
+  const { t: t2 } = useTranslation();
   const locale = useCurrentLocale();
   const state2 = $131cf43a05231e1e$export$6d095e787d2b5e1f({
     ...props,
@@ -3548,27 +3558,36 @@ function Calendar({ showYearNavigation, ...props }) {
     createCalendar
   });
   const { calendarProps } = useCalendar(props, state2);
-  return /* @__PURE__ */ React49__default.createElement(Box, { ...calendarProps }, /* @__PURE__ */ React49__default.createElement(CalendarHeader, { state: state2, showYearNavigation }), /* @__PURE__ */ React49__default.createElement(CalendarGrid, { state: state2 }));
+  const calendarAriaLabel = calendarProps["aria-label"];
+  const ariaLabel = t2(texts8.calendar) + (calendarAriaLabel ? ` ${calendarAriaLabel}` : "");
+  return /* @__PURE__ */ React49__default.createElement(Box, { ...calendarProps, "aria-label": ariaLabel }, /* @__PURE__ */ React49__default.createElement(CalendarHeader, { state: state2, showYearNavigation }), /* @__PURE__ */ React49__default.createElement(CalendarGrid, { state: state2 }));
 }
-var CalendarTriggerButton = (props) => {
-  const { t: t2 } = useTranslation();
-  const styles2 = useMultiStyleConfig("Datepicker", {});
-  const ref = useRef(null);
-  const { buttonProps } = useButton(props, ref);
-  return /* @__PURE__ */ React49__default.createElement(PopoverAnchor, null, /* @__PURE__ */ React49__default.createElement(
-    Box,
-    {
-      ref,
-      as: "button",
-      type: "button",
-      "aria-label": t2(texts8.openCalendar),
-      sx: styles2.calendarTriggerButton,
-      ...buttonProps
-    },
-    /* @__PURE__ */ React49__default.createElement(CalendarOutline24Icon, null)
-  ));
-};
 var texts8 = createTexts({
+  calendar: {
+    nb: "Kalender",
+    nn: "Kalender",
+    sv: "Kalender",
+    en: "Calendar"
+  }
+});
+var CalendarTriggerButton = forwardRef(
+  ({ ...buttonProps }, ref) => {
+    const { t: t2 } = useTranslation();
+    const styles2 = useMultiStyleConfig("Datepicker", {});
+    return /* @__PURE__ */ React49__default.createElement(PopoverAnchor, null, /* @__PURE__ */ React49__default.createElement(
+      Box,
+      {
+        ref,
+        as: "button",
+        "aria-label": t2(texts9.openCalendar),
+        sx: styles2.calendarTriggerButton,
+        ...buttonProps
+      },
+      /* @__PURE__ */ React49__default.createElement(CalendarOutline24Icon, null)
+    ));
+  }
+);
+var texts9 = createTexts({
   openCalendar: {
     nb: "\xC5pne kalender",
     nn: "\xC5pne kalendar",
@@ -3576,226 +3595,6 @@ var texts8 = createTexts({
     en: "Open calendar"
   }
 });
-
-// src/theme/foundations/index.ts
-var foundations_exports = {};
-__export(foundations_exports, {
-  borders: () => borders,
-  breakpoints: () => breakpoints,
-  colors: () => colors,
-  config: () => config,
-  fontSizes: () => fontSizes,
-  fontWeights: () => fontWeights,
-  fonts: () => fonts,
-  lineHeights: () => lineHeights,
-  radii: () => radii,
-  shadows: () => shadows,
-  sizes: () => sizes,
-  space: () => space,
-  spacing: () => spacing,
-  textStyles: () => textStyles,
-  zIndices: () => zIndices
-});
-var borders = {
-  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 breakpoints = {
-  sm: tokens10__default.size.breakpoint.sm,
-  md: tokens10__default.size.breakpoint.md,
-  lg: tokens10__default.size.breakpoint.lg,
-  xl: tokens10__default.size.breakpoint.lg,
-  "2xl": tokens10__default.size.breakpoint.lg
-};
-var colors = {
-  ...tokens10__default.color.alias,
-  ...tokens10__default.color.palette,
-  linjetag: tokens10__default.color.linjetag
-};
-
-// src/theme/foundations/config.ts
-var config = {
-  cssVarPrefix: "spor",
-  initialColorMode: "light",
-  useSystemColorMode: false
-};
-var fonts = {
-  body: tokens10__default.font.family.body,
-  heading: tokens10__default.font.family.heading,
-  mono: tokens10__default.font.family.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 = {
-  normal: tokens10__default.font.style.lg["line-height"]
-};
-var radii = {
-  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 shadows = {
-  none: "none",
-  sm: tokens10__default.depth.shadow.sm.value,
-  md: tokens10__default.depth.shadow.md.value,
-  lg: tokens10__default.depth.shadow.lg.value
-};
-var spacing = Object.entries(tokens10__default.size.spacing).reduce(
-  (tokens14, [key, token]) => ({
-    ...tokens14,
-    [Number(key)]: token
-  }),
-  {}
-);
-var space = spacing;
-
-// src/theme/foundations/sizes.ts
-var largeSizes = {
-  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 container = {
-  sm: "640px",
-  md: "768px",
-  lg: "1024px",
-  xl: "1280px"
-};
-var sizes = {
-  ...spacing,
-  ...largeSizes,
-  container
-};
-var textStyles = {
-  "2xl": {
-    fontSize: [
-      tokens10__default.font.style.xxl["font-size"].mobile,
-      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,
-      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,
-      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,
-      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,
-      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,
-      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,
-      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 zIndices = {
-  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
-};
-
-// src/datepicker/DateTimeSegment.tsx
 var DateTimeSegment = forwardRef$1(
   ({ segment, state: state2 }, externalRef) => {
     const internalRef = useRef(null);
@@ -3817,14 +3616,13 @@ var DateTimeSegment = forwardRef$1(
         style: {
           ...segmentProps.style,
           fontVariantNumeric: "tabular-nums",
-          boxSizing: "content-box",
-          color: colors.darkGrey
+          boxSizing: "content-box"
         },
         paddingX: "1px",
         textAlign: "end",
         outline: "none",
         borderRadius: "xs",
-        fontSize: "mobile.md",
+        fontSize: ["mobile.sm", "desktop.sm"],
         sx: styles2.dateTimeSegment,
         _focus: {
           backgroundColor: "darkTeal",
@@ -3917,6 +3715,7 @@ var DatePicker = forwardRef$1(
     errorMessage,
     minHeight,
     showYearNavigation,
+    withPortal = true,
     width = "auto",
     ...props
   }, externalRef) => {
@@ -3943,21 +3742,22 @@ var DatePicker = forwardRef$1(
       state2,
       ref
     );
-    const responsiveVariant = useBreakpointValue(typeof variant === "string" ? [variant] : variant) ?? "simple";
+    const styles2 = useMultiStyleConfig("Datepicker", {});
     const locale = useCurrentLocale();
-    const handleEnterClick = (e) => {
-      if (responsiveVariant === "simple" && e.key === "Enter" && !state2.isOpen) {
-        e.stopPropagation();
-        state2.setOpen(true);
-      }
-    };
+    const responsiveVariant = useBreakpointValue(typeof variant === "string" ? [variant] : variant) ?? "simple";
+    const hasTrigger = responsiveVariant === "with-trigger";
     const onFieldClick = () => {
       if (!hasTrigger) {
         state2.setOpen(true);
       }
     };
-    const hasTrigger = responsiveVariant === "with-trigger";
-    const styles2 = useMultiStyleConfig("Datepicker", {});
+    const popoverContent = /* @__PURE__ */ React49__default.createElement(PopoverContent, { color: "darkGrey", boxShadow: "md", sx: styles2.calendar }, /* @__PURE__ */ React49__default.createElement(PopoverArrow, { sx: styles2.arrow }), /* @__PURE__ */ React49__default.createElement(PopoverBody, null, /* @__PURE__ */ React49__default.createElement(FocusLock, null, /* @__PURE__ */ React49__default.createElement(
+      Calendar,
+      {
+        ...calendarProps,
+        showYearNavigation
+      }
+    ))));
     return /* @__PURE__ */ React49__default.createElement(I18nProvider, { locale }, /* @__PURE__ */ React49__default.createElement(
       Box,
       {
@@ -3971,18 +3771,14 @@ var DatePicker = forwardRef$1(
         {
           ...dialogProps,
           isOpen: state2.isOpen,
-          onClose: state2.close,
           onOpen: state2.open,
-          closeOnBlur: true,
-          closeOnEsc: true,
-          returnFocusOnClose: true
+          onClose: state2.close
         },
         /* @__PURE__ */ React49__default.createElement(InputGroup, { ...groupProps, display: "inline-flex" }, /* @__PURE__ */ React49__default.createElement(PopoverAnchor, null, /* @__PURE__ */ React49__default.createElement(
           StyledField,
           {
             variant: responsiveVariant,
             onClick: onFieldClick,
-            onKeyPress: handleEnterClick,
             paddingX: 3,
             minHeight
           },
@@ -3993,28 +3789,14 @@ var DatePicker = forwardRef$1(
               label: props.label,
               labelProps,
               name: props.name,
-              ref,
+              ref: hasTrigger ? void 0 : ref,
               ...fieldProps
             }
           )
-        )), hasTrigger && /* @__PURE__ */ React49__default.createElement(CalendarTriggerButton, { ...buttonProps })),
+        )), hasTrigger && /* @__PURE__ */ React49__default.createElement(PopoverTrigger, null, /* @__PURE__ */ React49__default.createElement(CalendarTriggerButton, { ref, ...buttonProps }))),
         /* @__PURE__ */ React49__default.createElement(FormErrorMessage, { ...errorMessageProps }, errorMessage),
-        state2.isOpen && !props.isDisabled && /* @__PURE__ */ React49__default.createElement(Portal, null, /* @__PURE__ */ React49__default.createElement(
-          PopoverContent,
-          {
-            color: "darkGrey",
-            boxShadow: "md",
-            sx: styles2.calendar
-          },
-          /* @__PURE__ */ React49__default.createElement(PopoverArrow, { sx: styles2.arrow }),
-          /* @__PURE__ */ React49__default.createElement(PopoverBody, null, /* @__PURE__ */ React49__default.createElement(
-            Calendar,
-            {
-              ...calendarProps,
-              showYearNavigation
-            }
-          ))
-        ))
+        state2.isOpen && !props.isDisabled && withPortal && /* @__PURE__ */ React49__default.createElement(Portal, null, popoverContent),
+        state2.isOpen && !props.isDisabled && !withPortal && popoverContent
       )
     ));
   }
@@ -4038,6 +3820,7 @@ function DateRangePicker({
   minHeight,
   startName,
   endName,
+  withPortal = true,
   ...props
 }) {
   const formControlProps = useFormControlContext();
@@ -4074,67 +3857,49 @@ function DateRangePicker({
     }
   };
   const hasTrigger = responsiveVariant === "with-trigger";
+  const popoverContent = /* @__PURE__ */ React49__default.createElement(PopoverContent, { sx: styles2.calendar, boxShadow: "md", maxWidth: "none" }, /* @__PURE__ */ React49__default.createElement(PopoverArrow, { sx: styles2.arrow }), /* @__PURE__ */ React49__default.createElement(PopoverBody, null, /* @__PURE__ */ React49__default.createElement(FocusLock, null, /* @__PURE__ */ React49__default.createElement(RangeCalendar, { ...calendarProps }))));
   return /* @__PURE__ */ React49__default.createElement(I18nProvider, { locale }, /* @__PURE__ */ React49__default.createElement(Box, { position: "relative", display: "inline-flex", flexDirection: "column" }, props.label && /* @__PURE__ */ React49__default.createElement(FormLabel, { ...labelProps, sx: styles2.inputLabel }, props.label), /* @__PURE__ */ React49__default.createElement(
     Popover,
     {
       ...dialogProps,
       isOpen: state2.isOpen,
-      onClose: () => state2.setOpen(false),
-      closeOnBlur: true,
-      closeOnEsc: true,
-      returnFocusOnClose: true
+      onOpen: state2.open,
+      onClose: state2.close
     },
-    /* @__PURE__ */ React49__default.createElement(
-      InputGroup,
+    /* @__PURE__ */ React49__default.createElement(InputGroup, { ...groupProps, width: "auto", display: "inline-flex" }, /* @__PURE__ */ React49__default.createElement(PopoverAnchor, null, /* @__PURE__ */ React49__default.createElement(
+      StyledField,
       {
-        ...groupProps,
-        ref,
-        width: "auto",
-        display: "inline-flex"
+        alignItems: "center",
+        paddingX: 3,
+        variant: responsiveVariant,
+        onClick: onFieldClick,
+        onKeyPress: handleEnterClick,
+        minHeight
       },
-      /* @__PURE__ */ React49__default.createElement(PopoverAnchor, null, /* @__PURE__ */ React49__default.createElement(
-        StyledField,
+      !hasTrigger && /* @__PURE__ */ React49__default.createElement(CalendarOutline24Icon, { mr: 2, alignSelf: "center" }),
+      /* @__PURE__ */ React49__default.createElement(
+        DateField,
         {
-          alignItems: "center",
-          paddingX: 3,
-          variant: responsiveVariant,
-          onClick: onFieldClick,
-          onKeyPress: handleEnterClick,
-          minHeight
-        },
-        !hasTrigger && /* @__PURE__ */ React49__default.createElement(CalendarOutline24Icon, { mr: 2, alignSelf: "center" }),
-        /* @__PURE__ */ React49__default.createElement(
-          DateField,
-          {
-            ...startFieldProps,
-            name: startName,
-            label: props.startLabel,
-            labelProps
-          }
-        ),
-        /* @__PURE__ */ React49__default.createElement(Box, { as: "span", "aria-hidden": "true", px: "2" }, "\u2013"),
-        /* @__PURE__ */ React49__default.createElement(
-          DateField,
-          {
-            ...endFieldProps,
-            name: endName,
-            label: props.endLabel,
-            labelProps
-          }
-        )
-      )),
-      hasTrigger && /* @__PURE__ */ React49__default.createElement(CalendarTriggerButton, { ...buttonProps })
-    ),
-    state2.isOpen && /* @__PURE__ */ React49__default.createElement(Portal, null, /* @__PURE__ */ React49__default.createElement(
-      PopoverContent,
-      {
-        sx: styles2.calendar,
-        boxShadow: "md",
-        maxWidth: "none"
-      },
-      /* @__PURE__ */ React49__default.createElement(PopoverArrow, { sx: styles2.arrow }),
-      /* @__PURE__ */ React49__default.createElement(PopoverBody, null, /* @__PURE__ */ React49__default.createElement(RangeCalendar, { ...calendarProps }))
-    ))
+          ...startFieldProps,
+          name: startName,
+          label: props.startLabel,
+          ref: hasTrigger ? void 0 : ref,
+          labelProps
+        }
+      ),
+      /* @__PURE__ */ React49__default.createElement(Box, { as: "span", "aria-hidden": "true", px: "2" }, "\u2013"),
+      /* @__PURE__ */ React49__default.createElement(
+        DateField,
+        {
+          ...endFieldProps,
+          name: endName,
+          label: props.endLabel,
+          labelProps
+        }
+      )
+    )), hasTrigger && /* @__PURE__ */ React49__default.createElement(PopoverTrigger, null, /* @__PURE__ */ React49__default.createElement(CalendarTriggerButton, { ref, ...buttonProps }))),
+    state2.isOpen && withPortal && /* @__PURE__ */ React49__default.createElement(Portal, null, popoverContent),
+    state2.isOpen && !withPortal && popoverContent
   )));
 }
 var TimeField = ({ state: state2, ...props }) => {
@@ -4178,7 +3943,7 @@ var TimePicker = ({
   const isDisabled = isDisabledExternally ?? isFormControlDisabled ?? false;
   const { t: t2 } = useTranslation();
   const locale = useCurrentLocale();
-  const label = externalLabel ?? t2(texts9.time);
+  const label = externalLabel ?? t2(texts10.time);
   const state2 = useTimeFieldState({
     value,
     defaultValue,
@@ -4211,15 +3976,15 @@ var TimePicker = ({
       })
     );
   };
-  const backwardsLabel = `${t2(texts9.backwards)} ${minuteInterval} ${t2(
-    texts9.minutes
+  const backwardsLabel = `${t2(texts10.backwards)} ${minuteInterval} ${t2(
+    texts10.minutes
   )}`;
-  const forwardsLabel = `${t2(texts9.forwards)} ${minuteInterval} ${t2(
-    texts9.minutes
+  const forwardsLabel = `${t2(texts10.forwards)} ${minuteInterval} ${t2(
+    texts10.minutes
   )}`;
-  const inputLabel = label ?? t2(texts9.time);
+  const inputLabel = label ?? t2(texts10.time);
   const ariaLabel = `${inputLabel} \u2013 ${t2(
-    texts9.selectedTimeIs(`${(dateTime == null ? void 0 : dateTime.hour) ?? 0} ${(dateTime == null ? void 0 : dateTime.minute) ?? 0}`)
+    texts10.selectedTimeIs(`${(dateTime == null ? void 0 : dateTime.hour) ?? 0} ${(dateTime == null ? void 0 : dateTime.minute) ?? 0}`)
   )}`;
   return /* @__PURE__ */ React49__default.createElement(
     StyledField,
@@ -4268,7 +4033,7 @@ var TimePicker = ({
     )
   );
 };
-var texts9 = createTexts({
+var texts10 = createTexts({
   selectedTimeIs: (time) => ({
     nb: `Valgt tidspunkt er ${time}`,
     nn: `Valt tidspunkt er ${time}`,
@@ -4862,7 +4627,7 @@ function InfoSelect({
       "aria-invalid": formControl.isInvalid,
       "aria-describedby": formControl["aria-describedby"]
     },
-    /* @__PURE__ */ React49__default.createElement(Box, { ...valueProps }, state2.selectedItem ? state2.selectedItem.textValue ?? state2.selectedItem.rendered : placeholder ?? t2(texts10.selectAnOption)),
+    /* @__PURE__ */ React49__default.createElement(Box, { ...valueProps }, state2.selectedItem ? state2.selectedItem.textValue ?? state2.selectedItem.rendered : placeholder ?? t2(texts11.selectAnOption)),
     /* @__PURE__ */ React49__default.createElement(Box, { sx: styles2.arrowIcon }, state2.isOpen ? /* @__PURE__ */ React49__default.createElement(DropdownUpFill24Icon, null) : /* @__PURE__ */ React49__default.createElement(DropdownDownFill24Icon, null))
   ), state2.isOpen && /* @__PURE__ */ React49__default.createElement(Popover3, { state: state2, triggerRef }, /* @__PURE__ */ React49__default.createElement(
     ListBox,
@@ -4875,7 +4640,7 @@ function InfoSelect({
     props.children
   )));
 }
-var texts10 = createTexts({
+var texts11 = createTexts({
   selectAnOption: {
     nb: "Velg et alternativ",
     nn: "Velg eit alternativ",
@@ -4922,6 +4687,17 @@ var NativeSelect = forwardRef(
     ), label && /* @__PURE__ */ React49__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) => {
@@ -4986,7 +4762,7 @@ function NumericStepper({
     VerySmallButton,
     {
       icon: /* @__PURE__ */ React49__default.createElement(SubtractIcon, { color: "white" }),
-      "aria-label": t2(texts11.decrementButtonAriaLabel),
+      "aria-label": t2(texts12.decrementButtonAriaLabel),
       onClick: () => onChange(value - 1),
       visibility: value <= minValue ? "hidden" : "visible",
       isDisabled: formControlProps.disabled
@@ -5060,7 +4836,7 @@ function NumericStepper({
     VerySmallButton,
     {
       icon: /* @__PURE__ */ React49__default.createElement(AddIcon, { color: "white" }),
-      "aria-label": t2(texts11.incrementButtonAriaLabel),
+      "aria-label": t2(texts12.incrementButtonAriaLabel),
       onClick: () => onChange(value + 1),
       visibility: value >= maxValue ? "hidden" : "visible",
       isDisabled: formControlProps.disabled,
@@ -5141,7 +4917,7 @@ var AddIcon = (props) => /* @__PURE__ */ React49__default.createElement(
     }
   )
 );
-var texts11 = createTexts({
+var texts12 = createTexts({
   decrementButtonAriaLabel: {
     nb: "Trekk fra 1",
     en: "Subtract 1",
@@ -5183,11 +4959,11 @@ var PasswordInput = forwardRef(
         borderRadius: "sm",
         mr: 1
       },
-      isShowingPassword ? t2(texts12.hidePassword) : t2(texts12.showPassword)
+      isShowingPassword ? t2(texts13.hidePassword) : t2(texts13.showPassword)
     )));
   }
 );
-var texts12 = createTexts({
+var texts13 = createTexts({
   showPassword: {
     nb: "Vis",
     nn: "Vis",
@@ -5245,7 +5021,7 @@ var PhoneNumberInput = forwardRef(
       {
         ref,
         type: "tel",
-        label: t2(texts13.phoneNumber),
+        label: t2(texts14.phoneNumber),
         value: value.nationalNumber,
         name: name ? `${name}-phone-number` : "phone-number",
         onChange: (e) => {
@@ -5261,7 +5037,7 @@ var PhoneNumberInput = forwardRef(
     ));
   }
 );
-var texts13 = createTexts({
+var texts14 = createTexts({
   phoneNumber: {
     nb: "Telefonnummer",
     nn: "Telefonnummer",
@@ -5269,7 +5045,7 @@ var texts13 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React49__default.lazy(() => import('./CountryCodeSelect-YGXVIC6H.mjs'));
+var LazyCountryCodeSelect = React49__default.lazy(() => import('./CountryCodeSelect-A2JYYB5S.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React49__default.createElement(Radio$1, { ...props, ref });
 });
@@ -5302,21 +5078,21 @@ var SearchInput = forwardRef(
         placeholder: " ",
         "data-attachable": true
       }
-    ), /* @__PURE__ */ React49__default.createElement(FormLabel3, { htmlFor: inputId, pointerEvents: "none" }, label ?? t2(texts14.label)), showClearButton && /* @__PURE__ */ React49__default.createElement(InputRightElement2, { width: "fit-content" }, /* @__PURE__ */ React49__default.createElement(
+    ), /* @__PURE__ */ React49__default.createElement(FormLabel3, { htmlFor: inputId, pointerEvents: "none" }, label ?? t2(texts15.label)), showClearButton && /* @__PURE__ */ React49__default.createElement(InputRightElement2, { width: "fit-content" }, /* @__PURE__ */ React49__default.createElement(
       IconButton$1,
       {
         variant: "ghost",
         type: "button",
         size: "sm",
         mr: 1,
-        "aria-label": t2(texts14.reset),
+        "aria-label": t2(texts15.reset),
         icon: /* @__PURE__ */ React49__default.createElement(CloseOutline24Icon, null),
         onClick: onReset
       }
     )));
   }
 );
-var texts14 = createTexts({
+var texts15 = createTexts({
   label: {
     nb: "S\xF8k",
     nn: "S\xF8k",
@@ -5519,12 +5295,12 @@ var TextLink = forwardRef(
       LinkOutOutline24Icon,
       {
         marginLeft: 0.5,
-        "aria-label": t2(texts15.externalLink)
+        "aria-label": t2(texts16.externalLink)
       }
     ));
   }
 );
-var texts15 = createTexts({
+var texts16 = createTexts({
   externalLink: {
     nb: "Ekstern lenke",
     nn: "Ekstern lenke",
@@ -5726,14 +5502,14 @@ var JumpButton = ({
     {
       as: "button",
       sx: styles2.container,
-      "aria-label": direction2 === "forward" ? t2(texts16.forward) : t2(texts16.backward),
+      "aria-label": direction2 === "forward" ? t2(texts17.forward) : t2(texts17.backward),
       disabled: isDisabled,
       ...props
     },
     direction2 === "forward" ? /* @__PURE__ */ React49__default.createElement(JumpForwardIcon, { sx: styles2.icon }) : /* @__PURE__ */ React49__default.createElement(JumpBackwardIcon, { sx: styles2.icon })
   );
 };
-var texts16 = createTexts({
+var texts17 = createTexts({
   forward: {
     nb: "15 sekunder frem",
     nn: "15 sekunder fram",
@@ -5763,14 +5539,14 @@ var PlayPauseButton = ({
     {
       as: "button",
       sx: styles2.container,
-      "aria-label": isPlaying ? t2(texts17.pause) : t2(texts17.play),
+      "aria-label": isPlaying ? t2(texts18.pause) : t2(texts18.play),
       disabled: isDisabled,
       ...props
     },
     isPlaying ? /* @__PURE__ */ React49__default.createElement(PauseIcon, { sx: styles2.icon }) : /* @__PURE__ */ React49__default.createElement(PlayIcon, { sx: styles2.icon })
   );
 };
-var texts17 = createTexts({
+var texts18 = createTexts({
   pause: {
     nb: "Pause",
     nn: "Pause",
@@ -5800,14 +5576,14 @@ var SkipButton = ({
     {
       as: "button",
       sx: styles2.container,
-      "aria-label": direction2 === "forward" ? t2(texts18.next) : t2(texts18.previous),
+      "aria-label": direction2 === "forward" ? t2(texts19.next) : t2(texts19.previous),
       disabled: isDisabled,
       ...props
     },
     direction2 === "forward" ? /* @__PURE__ */ React49__default.createElement(SkipNextIcon, { sx: styles2.icon }) : /* @__PURE__ */ React49__default.createElement(SkipPreviousIcon, { sx: styles2.icon })
   );
 };
-var texts18 = createTexts({
+var texts19 = createTexts({
   next: {
     nb: "Neste",
     nn: "Neste",
@@ -5957,10 +5733,10 @@ var NextStepButton = ({ isLastStep, onNext }) => {
       leftIcon: isLastStep ? void 0 : /* @__PURE__ */ React49.createElement(ArrowRightFill18Icon, null),
       onClick: isLastStep ? onClose : onNext
     },
-    t2(isLastStep ? texts19.finish : texts19.nextStep)
+    t2(isLastStep ? texts20.finish : texts20.nextStep)
   );
 };
-var texts19 = createTexts({
+var texts20 = createTexts({
   nextStep: {
     nb: "Neste",
     nn: "Neste",
@@ -6075,7 +5851,7 @@ var Stepper = ({
     /* @__PURE__ */ React49__default.createElement(Box, { __css: style.container }, /* @__PURE__ */ React49__default.createElement(Box, { __css: style.innerContainer }, /* @__PURE__ */ React49__default.createElement(HStack, null, activeStep > 1 && /* @__PURE__ */ React49__default.createElement(
       IconButton,
       {
-        "aria-label": t2(texts20.back),
+        "aria-label": t2(texts21.back),
         icon: /* @__PURE__ */ React49__default.createElement(DropdownLeftFill24Icon, null),
         variant: "ghost",
         size: "sm",
@@ -6085,14 +5861,14 @@ var Stepper = ({
     ), /* @__PURE__ */ React49__default.createElement(
       SimplePopover,
       {
-        triggerElement: /* @__PURE__ */ React49__default.createElement(Box, { as: "button", __css: style.stepCounter }, t2(texts20.stepsOf(activeStep, numberOfSteps))),
+        triggerElement: /* @__PURE__ */ React49__default.createElement(Box, { as: "button", __css: style.stepCounter }, t2(texts21.stepsOf(activeStep, numberOfSteps))),
         borderRadius: "xs"
       },
       steps.map((step, index) => /* @__PURE__ */ React49__default.createElement(StepperStep, { key: step, stepNumber: index + 1 }, step))
     )), title && /* @__PURE__ */ React49__default.createElement(Box, { as: "h3", __css: style.title }, title)), /* @__PURE__ */ React49__default.createElement(Flex, { justifyContent: "center", display: ["none", "flex"] }, steps.map((step, index) => /* @__PURE__ */ React49__default.createElement(StepperStep, { key: index, stepNumber: index + 1 }, step))))
   ));
 };
-var texts20 = createTexts({
+var texts21 = createTexts({
   stepsOf: (activeStep, numberOfSteps) => ({
     nb: `Steg ${activeStep} av ${numberOfSteps}`,
     nn: `Steg ${activeStep} av ${numberOfSteps}`,
@@ -6193,7 +5969,7 @@ var transition = {
   duration: transitionDuration
 };
 var transition_default = transition;
-var zIndices2 = {
+var zIndices = {
   hide: -1,
   auto: "auto",
   base: 0,
@@ -6208,16 +5984,16 @@ var zIndices2 = {
   toast: 1700,
   tooltip: 1800
 };
-var z_index_default = zIndices2;
-var borders2 = {
+var z_index_default = zIndices;
+var borders = {
   none: 0,
   "1px": "1px solid",
   "2px": "2px solid",
   "4px": "4px solid",
   "8px": "8px solid"
 };
-var borders_default = borders2;
-var breakpoints2 = {
+var borders_default = borders;
+var breakpoints = {
   base: "0em",
   sm: "30em",
   md: "48em",
@@ -6225,7 +6001,7 @@ var breakpoints2 = {
   xl: "80em",
   "2xl": "96em"
 };
-var breakpoints_default = breakpoints2;
+var breakpoints_default = breakpoints;
 var colors2 = {
   transparent: "transparent",
   current: "currentColor",
@@ -6449,7 +6225,7 @@ var colors2 = {
   }
 };
 var colors_default = colors2;
-var radii2 = {
+var radii = {
   none: "0",
   sm: "0.125rem",
   base: "0.25rem",
@@ -6460,7 +6236,7 @@ var radii2 = {
   "3xl": "1.5rem",
   full: "9999px"
 };
-var radius_default = radii2;
+var radius_default = radii;
 var shadows2 = {
   xs: "0 0 0 1px rgba(0, 0, 0, 0.05)",
   sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
@@ -6547,7 +6323,7 @@ var typography = {
   }
 };
 var typography_default = typography;
-var spacing2 = {
+var spacing = {
   px: "1px",
   0.5: "0.125rem",
   1: "0.25rem",
@@ -6582,7 +6358,7 @@ var spacing2 = {
   80: "20rem",
   96: "24rem"
 };
-var largeSizes2 = {
+var largeSizes = {
   max: "max-content",
   min: "min-content",
   full: "100%",
@@ -6602,18 +6378,18 @@ var largeSizes2 = {
   "8xl": "90rem",
   prose: "60ch"
 };
-var container2 = {
+var container = {
   sm: "640px",
   md: "768px",
   lg: "1024px",
   xl: "1280px"
 };
-var sizes2 = {
-  ...spacing2,
-  ...largeSizes2,
-  container: container2
+var sizes = {
+  ...spacing,
+  ...largeSizes,
+  container
 };
-var sizes_default = sizes2;
+var sizes_default = sizes;
 var foundations = {
   breakpoints: breakpoints_default,
   zIndices: z_index_default,
@@ -6623,7 +6399,7 @@ var foundations = {
   ...typography_default,
   sizes: sizes_default,
   shadows: shadows_default,
-  space: spacing2,
+  space: spacing,
   borders: borders_default,
   transition: transition_default
 };
@@ -7368,7 +7144,7 @@ var ring = {
   ringOffsetColor: t.colors("--chakra-ring-offset-color"),
   ringInset: t.prop("--chakra-ring-inset")
 };
-var space2 = {
+var space = {
   margin: t.spaceT("margin"),
   marginTop: t.spaceT("marginTop"),
   marginBlockStart: t.spaceT("marginBlockStart"),
@@ -7396,29 +7172,29 @@ var space2 = {
   paddingY: t.space(["paddingTop", "paddingBottom"]),
   paddingBlock: t.space("paddingBlock")
 };
-Object.assign(space2, {
-  m: space2.margin,
-  mt: space2.marginTop,
-  mr: space2.marginRight,
-  me: space2.marginInlineEnd,
-  marginEnd: space2.marginInlineEnd,
-  mb: space2.marginBottom,
-  ml: space2.marginLeft,
-  ms: space2.marginInlineStart,
-  marginStart: space2.marginInlineStart,
-  mx: space2.marginX,
-  my: space2.marginY,
-  p: space2.padding,
-  pt: space2.paddingTop,
-  py: space2.paddingY,
-  px: space2.paddingX,
-  pb: space2.paddingBottom,
-  pl: space2.paddingLeft,
-  ps: space2.paddingInlineStart,
-  paddingStart: space2.paddingInlineStart,
-  pr: space2.paddingRight,
-  pe: space2.paddingInlineEnd,
-  paddingEnd: space2.paddingInlineEnd
+Object.assign(space, {
+  m: space.margin,
+  mt: space.marginTop,
+  mr: space.marginRight,
+  me: space.marginInlineEnd,
+  marginEnd: space.marginInlineEnd,
+  mb: space.marginBottom,
+  ml: space.marginLeft,
+  ms: space.marginInlineStart,
+  marginStart: space.marginInlineStart,
+  mx: space.marginX,
+  my: space.marginY,
+  p: space.padding,
+  pt: space.paddingTop,
+  py: space.paddingY,
+  px: space.paddingX,
+  pb: space.paddingBottom,
+  pl: space.paddingLeft,
+  ps: space.paddingInlineStart,
+  paddingStart: space.paddingInlineStart,
+  pr: space.paddingRight,
+  pe: space.paddingInlineEnd,
+  paddingEnd: space.paddingInlineEnd
 });
 var textDecoration = {
   textDecorationColor: t.colors("textDecorationColor"),
@@ -7687,7 +7463,7 @@ var systemProps = (0, import_lodash3.default)(
   others,
   position,
   effect,
-  space2,
+  space,
   scroll,
   typography2,
   textDecoration,
@@ -7695,7 +7471,7 @@ var systemProps = (0, import_lodash3.default)(
   list,
   transition2
 );
-Object.assign({}, space2, layout, flexbox, grid, position);
+Object.assign({}, space, layout, flexbox, grid, position);
 [...Object.keys(systemProps), ...pseudoPropNames];
 ({ ...systemProps, ...pseudoSelectors });
 function defineStyle(styles2) {
@@ -8073,7 +7849,7 @@ var baseStyle2 = definePartsStyle2((props) => ({
   track: baseStyleTrack(props),
   thumb: baseStyleThumb
 }));
-var sizes3 = {
+var sizes2 = {
   sm: definePartsStyle2({
     container: {
       [$width.variable]: "1.375rem",
@@ -8095,7 +7871,7 @@ var sizes3 = {
 };
 var switchTheme = defineMultiStyleConfig2({
   baseStyle: baseStyle2,
-  sizes: sizes3,
+  sizes: sizes2,
   defaultProps: {
     size: "md",
     colorScheme: "blue"
@@ -8200,7 +7976,7 @@ var variants = {
   striped: variantStripe,
   unstyled: defineStyle({})
 };
-var sizes4 = {
+var sizes3 = {
   sm: definePartsStyle3({
     th: {
       px: "4",
@@ -8260,7 +8036,7 @@ var sizes4 = {
 var tableTheme = defineMultiStyleConfig3({
   baseStyle: baseStyle3,
   variants,
-  sizes: sizes4,
+  sizes: sizes3,
   defaultProps: {
     variant: "simple",
     size: "md",
@@ -8314,7 +8090,7 @@ var baseStyle4 = definePartsStyle4((props) => ({
   tablist: baseStyleTablist(props),
   tabpanel: baseStyleTabpanel
 }));
-var sizes5 = {
+var sizes4 = {
   sm: definePartsStyle4({
     tab: {
       py: 1,
@@ -8483,7 +8259,7 @@ var variants2 = {
 };
 var tabsTheme = defineMultiStyleConfig4({
   baseStyle: baseStyle4,
-  sizes: sizes5,
+  sizes: sizes4,
   variants: variants2,
   defaultProps: {
     size: "md",
@@ -8610,7 +8386,7 @@ var baseStyle6 = definePartsStyle5({
   label: baseStyleLabel,
   closeButton: baseStyleCloseButton
 });
-var sizes6 = {
+var sizes5 = {
   sm: definePartsStyle5({
     container: {
       [$minH.variable]: "sizes.5",
@@ -8663,7 +8439,7 @@ var variants4 = {
 var tagTheme = defineMultiStyleConfig5({
   variants: variants4,
   baseStyle: baseStyle6,
-  sizes: sizes6,
+  sizes: sizes5,
   defaultProps: {
     size: "md",
     variant: "subtle",
@@ -8726,7 +8502,7 @@ var size = {
     [$height2.variable]: "sizes.6"
   })
 };
-var sizes7 = {
+var sizes6 = {
   lg: definePartsStyle6({
     field: size.lg,
     group: size.lg
@@ -8865,7 +8641,7 @@ var variants5 = {
 };
 var inputTheme = defineMultiStyleConfig6({
   baseStyle: baseStyle7,
-  sizes: sizes7,
+  sizes: sizes6,
   variants: variants5,
   defaultProps: {
     size: "md",
@@ -8911,7 +8687,7 @@ var _e;
 var _f;
 var _g;
 var _h;
-var sizes8 = {
+var sizes7 = {
   xs: (_b2 = (_a3 = inputTheme.sizes) == null ? void 0 : _a3.xs.field) != null ? _b2 : {},
   sm: (_d = (_c = inputTheme.sizes) == null ? void 0 : _c.sm.field) != null ? _d : {},
   md: (_f = (_e = inputTheme.sizes) == null ? void 0 : _e.md.field) != null ? _f : {},
@@ -8919,7 +8695,7 @@ var sizes8 = {
 };
 var textareaTheme = defineStyleConfig({
   baseStyle: baseStyle8,
-  sizes: sizes8,
+  sizes: sizes7,
   variants: variants6,
   defaultProps: {
     size: "md",
@@ -8994,7 +8770,7 @@ var baseStyle10 = definePartsStyle7((props) => ({
   filledTrack: baseStyleFilledTrack(props),
   track: baseStyleTrack2(props)
 }));
-var sizes9 = {
+var sizes8 = {
   xs: definePartsStyle7({
     track: { h: "1" }
   }),
@@ -9009,7 +8785,7 @@ var sizes9 = {
   })
 };
 var progressTheme = defineMultiStyleConfig7({
-  sizes: sizes9,
+  sizes: sizes8,
   baseStyle: baseStyle10,
   defaultProps: {
     size: "md",
@@ -9081,7 +8857,7 @@ var baseStyle11 = definePartsStyle8((props) => ({
   control: runIfFn(baseStyleControl, props),
   label: baseStyleLabel3
 }));
-var sizes10 = {
+var sizes9 = {
   sm: definePartsStyle8({
     control: { [$size2.variable]: "sizes.3" },
     label: { fontSize: "sm" },
@@ -9100,7 +8876,7 @@ var sizes10 = {
 };
 var checkboxTheme = defineMultiStyleConfig8({
   baseStyle: baseStyle11,
-  sizes: sizes10,
+  sizes: sizes9,
   defaultProps: {
     size: "md",
     colorScheme: "blue"
@@ -9135,7 +8911,7 @@ var baseStyle12 = definePartsStyle9((props) => {
     control: baseStyleControl2(props)
   };
 });
-var sizes11 = {
+var sizes10 = {
   md: definePartsStyle9({
     control: { w: "4", h: "4" },
     label: { fontSize: "md" }
@@ -9151,7 +8927,7 @@ var sizes11 = {
 };
 var radioTheme = defineMultiStyleConfig9({
   baseStyle: baseStyle12,
-  sizes: sizes11,
+  sizes: sizes10,
   defaultProps: {
     size: "md",
     colorScheme: "blue"
@@ -9200,7 +8976,7 @@ var _e2;
 var _f2;
 var _g2;
 var _h2;
-var sizes12 = {
+var sizes11 = {
   lg: {
     ...(_a22 = inputTheme.sizes) == null ? void 0 : _a22.lg,
     field: {
@@ -9235,7 +9011,7 @@ var sizes12 = {
 };
 var selectTheme = defineMultiStyleConfig10({
   baseStyle: baseStyle13,
-  sizes: sizes12,
+  sizes: sizes11,
   variants: inputTheme.variants,
   defaultProps: inputTheme.defaultProps
 });
@@ -9401,14 +9177,14 @@ var sizeSm = definePartsStyle11({
     [$trackSize.variable]: `sizes.0.5`
   }
 });
-var sizes13 = {
+var sizes12 = {
   lg: sizeLg,
   md: sizeMd,
   sm: sizeSm
 };
 var sliderTheme = defineMultiStyleConfig11({
   baseStyle: baseStyle16,
-  sizes: sizes13,
+  sizes: sizes12,
   defaultProps: {
     size: "md",
     colorScheme: "blue"
@@ -9419,7 +9195,7 @@ var baseStyle17 = defineStyle({
   width: [$size3.reference],
   height: [$size3.reference]
 });
-var sizes14 = {
+var sizes13 = {
   xs: defineStyle({
     [$size3.variable]: "sizes.3"
   }),
@@ -9438,7 +9214,7 @@ var sizes14 = {
 };
 var spinnerTheme = defineStyleConfig({
   baseStyle: baseStyle17,
-  sizes: sizes14,
+  sizes: sizes13,
   defaultProps: {
     size: "md"
   }
@@ -9468,7 +9244,7 @@ var baseStyle18 = definePartsStyle12({
   number: baseStyleNumber,
   icon: baseStyleIcon3
 });
-var sizes15 = {
+var sizes14 = {
   md: definePartsStyle12({
     label: { fontSize: "sm" },
     helpText: { fontSize: "sm" },
@@ -9477,7 +9253,7 @@ var sizes15 = {
 };
 var statTheme = defineMultiStyleConfig12({
   baseStyle: baseStyle18,
-  sizes: sizes15,
+  sizes: sizes14,
   defaultProps: {
     size: "md"
   }
@@ -9703,7 +9479,7 @@ function getSize(value) {
     dialog: { maxW: value }
   });
 }
-var sizes16 = {
+var sizes15 = {
   xs: getSize("xs"),
   sm: getSize("sm"),
   md: getSize("md"),
@@ -9718,7 +9494,7 @@ var sizes16 = {
 };
 var modalTheme = defineMultiStyleConfig15({
   baseStyle: baseStyle23,
-  sizes: sizes16,
+  sizes: sizes15,
   defaultProps: { size: "md" }
 });
 var { defineMultiStyleConfig: defineMultiStyleConfig16, definePartsStyle: definePartsStyle16 } = createMultiStyleConfigHelpers(numberInputAnatomy.keys);
@@ -9802,7 +9578,7 @@ function getSize2(size2) {
     }
   });
 }
-var sizes17 = {
+var sizes16 = {
   xs: getSize2("xs"),
   sm: getSize2("sm"),
   md: getSize2("md"),
@@ -9810,7 +9586,7 @@ var sizes17 = {
 };
 var numberInputTheme = defineMultiStyleConfig16({
   baseStyle: baseStyle24,
-  sizes: sizes17,
+  sizes: sizes16,
   variants: inputTheme.variants,
   defaultProps: inputTheme.defaultProps
 });
@@ -9819,7 +9595,7 @@ var baseStyle25 = defineStyle({
   ...(_a5 = inputTheme.baseStyle) == null ? void 0 : _a5.field,
   textAlign: "center"
 });
-var sizes18 = {
+var sizes17 = {
   lg: defineStyle({
     fontSize: "lg",
     w: 12,
@@ -9870,7 +9646,7 @@ var variants7 = {
 };
 var pinInputTheme = defineStyleConfig({
   baseStyle: baseStyle25,
-  sizes: sizes18,
+  sizes: sizes17,
   variants: variants7,
   defaultProps: inputTheme.defaultProps
 });
@@ -10000,7 +9776,7 @@ var baseStyle27 = definePartsStyle18((props) => ({
   body: baseStyleBody3,
   footer: baseStyleFooter3
 }));
-var sizes19 = {
+var sizes18 = {
   xs: getSize3("xs"),
   sm: getSize3("md"),
   md: getSize3("lg"),
@@ -10010,7 +9786,7 @@ var sizes19 = {
 };
 var drawerTheme = defineMultiStyleConfig18({
   baseStyle: baseStyle27,
-  sizes: sizes19,
+  sizes: sizes18,
   defaultProps: {
     size: "xs"
   }
@@ -10125,7 +9901,7 @@ var baseStyle32 = defineStyle({
   fontFamily: "heading",
   fontWeight: "bold"
 });
-var sizes20 = {
+var sizes19 = {
   "4xl": defineStyle({
     fontSize: ["6xl", null, "7xl"],
     lineHeight: 1
@@ -10161,7 +9937,7 @@ var sizes20 = {
 };
 var headingTheme = defineStyleConfig({
   baseStyle: baseStyle32,
-  sizes: sizes20,
+  sizes: sizes19,
   defaultProps: {
     size: "xl"
   }
@@ -10331,7 +10107,7 @@ var variants8 = {
   link: variantLink,
   unstyled: variantUnstyled3
 };
-var sizes21 = {
+var sizes20 = {
   lg: defineStyle({
     h: "12",
     minW: "12",
@@ -10360,7 +10136,7 @@ var sizes21 = {
 var buttonTheme = defineStyleConfig({
   baseStyle: baseStyle34,
   variants: variants8,
-  sizes: sizes21,
+  sizes: sizes20,
   defaultProps: {
     variant: "solid",
     size: "md",
@@ -10395,7 +10171,7 @@ var baseStyle35 = definePartsStyle23({
     padding: $padding2.reference
   }
 });
-var sizes22 = {
+var sizes21 = {
   sm: definePartsStyle23({
     container: {
       [$radius.variable]: "radii.base",
@@ -10450,7 +10226,7 @@ var variants9 = {
 var cardTheme = defineMultiStyleConfig23({
   baseStyle: baseStyle35,
   variants: variants9,
-  sizes: sizes22,
+  sizes: sizes21,
   defaultProps: {
     variant: "elevated",
     size: "md"
@@ -10486,7 +10262,7 @@ var baseStyle36 = defineStyle({
   },
   bg: $bg14.reference
 });
-var sizes23 = {
+var sizes22 = {
   lg: defineStyle({
     [$size4.variable]: "sizes.10",
     fontSize: "md"
@@ -10502,7 +10278,7 @@ var sizes23 = {
 };
 var closeButtonTheme = defineStyleConfig({
   baseStyle: baseStyle36,
-  sizes: sizes23,
+  sizes: sizes22,
   defaultProps: {
     size: "md"
   }
@@ -10780,7 +10556,7 @@ function getSize4(size2) {
     }
   });
 }
-var sizes24 = {
+var sizes23 = {
   "2xs": getSize4(4),
   xs: getSize4(6),
   sm: getSize4(8),
@@ -10792,7 +10568,7 @@ var sizes24 = {
 };
 var avatarTheme = defineMultiStyleConfig26({
   baseStyle: baseStyle42,
-  sizes: sizes24,
+  sizes: sizes23,
   defaultProps: {
     size: "md"
   }
@@ -10871,7 +10647,7 @@ var styles = {
   }
 };
 var direction = "ltr";
-var config2 = {
+var config = {
   useSystemColorMode: false,
   initialColorMode: "light",
   cssVarPrefix: "chakra"
@@ -10882,7 +10658,7 @@ var theme2 = {
   ...foundations,
   components,
   styles,
-  config: config2
+  config
 };
 
 // src/theme/components/index.ts
@@ -10924,6 +10700,213 @@ __export(components_exports, {
   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,
+  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 = {
+  sm: tokens10__default.size.breakpoint.sm,
+  md: tokens10__default.size.breakpoint.md,
+  lg: tokens10__default.size.breakpoint.lg,
+  xl: tokens10__default.size.breakpoint.lg,
+  "2xl": tokens10__default.size.breakpoint.lg
+};
+
+// src/theme/foundations/config.ts
+var config2 = {
+  cssVarPrefix: "spor",
+  initialColorMode: "light",
+  useSystemColorMode: false
+};
+var fonts = {
+  body: tokens10__default.font.family.body,
+  heading: tokens10__default.font.family.heading,
+  mono: tokens10__default.font.family.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 = {
+  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,
+      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,
+      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,
+      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,
+      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,
+      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,
+      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,
+      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
+};
+
 // src/theme/components/accordion.ts
 var helpers = createMultiStyleConfigHelpers(accordionAnatomy.keys);
 var config3 = helpers.defineMultiStyleConfig({
@@ -10941,6 +10924,7 @@ var config3 = helpers.defineMultiStyleConfig({
       justifyContent: "space-between",
       color: "darkGrey",
       textAlign: "left",
+      fontWeight: "bold",
       ...focusVisible({
         notFocus: {
           boxShadow: getBoxShadowString({
@@ -10960,8 +10944,7 @@ var config3 = helpers.defineMultiStyleConfig({
       }
     },
     panel: {
-      pt: 2,
-      pb: 5,
+      paddingY: 2,
       borderBottomRadius: "sm"
     },
     icon: {
@@ -10976,8 +10959,7 @@ var config3 = helpers.defineMultiStyleConfig({
           backgroundColor: "seaMist"
         },
         _active: {
-          backgroundColor: "mint",
-          boxShadow: getBoxShadowString({ borderColor: "darkGrey" })
+          backgroundColor: "mint"
         }
       }
     },
@@ -11007,7 +10989,10 @@ var config3 = helpers.defineMultiStyleConfig({
     },
     card: {
       container: {
-        boxShadow: "md"
+        boxShadow: getBoxShadowString({
+          baseShadow: "sm",
+          borderColor: "silver"
+        })
       },
       button: {
         _expanded: {
@@ -11026,31 +11011,34 @@ var config3 = helpers.defineMultiStyleConfig({
     sm: {
       button: {
         fontSize: "desktop.xs",
-        px: 2,
-        py: 1
+        paddingX: 2,
+        paddingY: 1
       },
       panel: {
-        px: 2
+        fontSize: "desktop.xs",
+        paddingX: 2
       }
     },
     md: {
       button: {
         fontSize: "desktop.sm",
-        px: 3,
-        py: 1
+        paddingX: 3,
+        paddingY: 1
       },
       panel: {
-        px: 3
+        fontSize: "desktop.sm",
+        paddingX: 3
       }
     },
     lg: {
       button: {
         fontSize: "desktop.sm",
-        px: 3,
-        py: 2
+        paddingX: 3,
+        paddingY: 2
       },
       panel: {
-        px: 3
+        fontSize: "desktop.sm",
+        paddingX: 3
       }
     }
   },
@@ -11957,7 +11945,7 @@ var config13 = helpers6.defineMultiStyleConfig({
           borderColor: mode("darkGrey", "white")(props),
           borderWidth: 2
         }),
-        zIndex: zIndices.docked
+        zIndex: zIndices2.docked
       },
       _focusWithin: {
         boxShadow: getBoxShadowString({
@@ -11993,7 +11981,7 @@ var config13 = helpers6.defineMultiStyleConfig({
     },
     dateTimeSegment: {
       color: mode(
-        props.isEditable ? "darkGrey" : "dimGrey",
+        "darkGrey",
         props.isPlaceholder ? "whiteAlpha.400" : "white"
       )(props)
     },
@@ -12115,7 +12103,14 @@ var config13 = helpers6.defineMultiStyleConfig({
         boxShadow: getBoxShadowString({
           borderWidth: 1,
           borderColor: mode("osloGrey", "dimGrey")(props)
-        })
+        }),
+        _focus: {
+          outline: "none",
+          boxShadow: getBoxShadowString({
+            borderWidth: 2,
+            borderColor: mode("greenHaze", "azure")(props)
+          })
+        }
       },
       "&[data-unavailable]": {
         pointerEvents: "none",
@@ -14536,7 +14531,7 @@ var ToastIcon = ({ variant }) => {
     Icon,
     {
       flexShrink: 0,
-      "aria-label": t2(texts21[variant]),
+      "aria-label": t2(texts22[variant]),
       marginRight: 1,
       marginY: 1.5,
       color: "darkGrey"
@@ -14553,7 +14548,7 @@ var getIcon3 = (variant) => {
       return ErrorOutline24Icon;
   }
 };
-var texts21 = createTexts({
+var texts22 = createTexts({
   info: {
     nb: "Informasjon",
     nn: "Informasjon",
@@ -14597,13 +14592,13 @@ var ClosableToast = ({
     {
       sx: styles2.dismissButton,
       variant: "ghost",
-      "aria-label": t2(texts22.dismiss),
+      "aria-label": t2(texts23.dismiss),
       icon: /* @__PURE__ */ React49__default.createElement(CloseFill18Icon, null),
       onClick: onClose
     }
   ));
 };
-var texts22 = createTexts({
+var texts23 = createTexts({
   dismiss: {
     nb: "Lukk",
     nn: "Lukk",