@vygruppen/spor-react 3.3.0 → 3.3.2

package/dist/index.js

@@ -8,8 +8,8 @@ var reactAria = require('react-aria');
 var sporIconReact = require('@vygruppen/spor-icon-react');
 var framerMotion = require('framer-motion');
 var date = require('@internationalized/date');
-var tokens10 = require('@vygruppen/spor-design-tokens');
 var reactStately = require('react-stately');
+var tokens10 = require('@vygruppen/spor-design-tokens');
 var reactSwipeable = require('react-swipeable');
 var react$1 = require('@emotion/react');
 var themeTools = require('@chakra-ui/theme-tools');
@@ -244,8 +244,8 @@ function useTranslation() {
   };
   return { t: t2, language };
 }
-function createTexts(texts24) {
-  return texts24;
+function createTexts(texts25) {
+  return texts25;
 }
 exports.Language = void 0; var LanguageContext;
 var init_i18n = __esm({
@@ -2908,7 +2908,14 @@ var init_typography = __esm({
 });
 function CalendarCell({ state: state2, date: date$1, currentMonth }) {
   const ref = React49.useRef(null);
-  const { cellProps, buttonProps, isSelected, isDisabled, isUnavailable } = reactAria.useCalendarCell({ date: date$1 }, state2, ref);
+  const {
+    cellProps,
+    buttonProps,
+    isSelected,
+    isDisabled,
+    isUnavailable,
+    isOutsideVisibleRange
+  } = reactAria.useCalendarCell({ date: date$1 }, state2, ref);
   const isOutsideMonth = !date.isSameMonth(currentMonth, date$1);
   const styles2 = react.useMultiStyleConfig("Datepicker", {});
   const stateProps = {};
@@ -2924,6 +2931,16 @@ function CalendarCell({ state: state2, date: date$1, currentMonth }) {
   if (isOutsideMonth) {
     stateProps["data-unavailable"] = true;
   }
+  React49.useEffect(() => {
+    var _a6;
+    (_a6 = ref == null ? void 0 : ref.current) == null ? void 0 : _a6.addEventListener(
+      "touchend",
+      (event) => {
+        event.preventDefault();
+      },
+      { passive: false, once: true }
+    );
+  }, []);
   return /* @__PURE__ */ React49__namespace.default.createElement(
     react.Box,
     {
@@ -2956,6 +2973,7 @@ function CalendarCell({ state: state2, date: date$1, currentMonth }) {
         ...stateProps,
         ref,
         sx: styles2.dateCell,
+        hidden: isOutsideVisibleRange,
         width: "100%"
       },
       date$1.day
@@ -2974,15 +2992,15 @@ var init_utils = __esm({
       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";
       }
     };
     getCurrentTime = () => {
@@ -3188,6 +3206,7 @@ var init_CalendarHeader = __esm({
   }
 });
 function Calendar({ showYearNavigation, ...props }) {
+  const { t: t2 } = useTranslation();
   const locale = useCurrentLocale();
   const state2 = $131cf43a05231e1e$export$6d095e787d2b5e1f({
     ...props,
@@ -3195,39 +3214,50 @@ function Calendar({ showYearNavigation, ...props }) {
     createCalendar: date.createCalendar
   });
   const { calendarProps } = reactAria.useCalendar(props, state2);
-  return /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { ...calendarProps }, /* @__PURE__ */ React49__namespace.default.createElement(CalendarHeader, { state: state2, showYearNavigation }), /* @__PURE__ */ React49__namespace.default.createElement(CalendarGrid, { state: state2 }));
+  const calendarAriaLabel = calendarProps["aria-label"];
+  const ariaLabel = t2(texts8.calendar) + (calendarAriaLabel ? ` ${calendarAriaLabel}` : "");
+  return /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { ...calendarProps, "aria-label": ariaLabel }, /* @__PURE__ */ React49__namespace.default.createElement(CalendarHeader, { state: state2, showYearNavigation }), /* @__PURE__ */ React49__namespace.default.createElement(CalendarGrid, { state: state2 }));
 }
+var texts8;
 var init_Calendar = __esm({
   "src/datepicker/Calendar.tsx"() {
     init_import5();
     init_CalendarGrid();
     init_CalendarHeader();
     init_utils();
+    init_i18n();
+    texts8 = createTexts({
+      calendar: {
+        nb: "Kalender",
+        nn: "Kalender",
+        sv: "Kalender",
+        en: "Calendar"
+      }
+    });
   }
 });
-var CalendarTriggerButton, texts8;
+var CalendarTriggerButton, texts9;
 var init_CalendarTriggerButton = __esm({
   "src/datepicker/CalendarTriggerButton.tsx"() {
     init_src();
-    CalendarTriggerButton = (props) => {
-      const { t: t2 } = useTranslation();
-      const styles2 = react.useMultiStyleConfig("Datepicker", {});
-      const ref = React49.useRef(null);
-      const { buttonProps } = reactAria.useButton(props, ref);
-      return /* @__PURE__ */ React49__namespace.default.createElement(react.PopoverAnchor, null, /* @__PURE__ */ React49__namespace.default.createElement(
-        react.Box,
-        {
-          ref,
-          as: "button",
-          type: "button",
-          "aria-label": t2(texts8.openCalendar),
-          sx: styles2.calendarTriggerButton,
-          ...buttonProps
-        },
-        /* @__PURE__ */ React49__namespace.default.createElement(sporIconReact.CalendarOutline24Icon, null)
-      ));
-    };
-    texts8 = createTexts({
+    CalendarTriggerButton = react.forwardRef(
+      ({ ...buttonProps }, ref) => {
+        const { t: t2 } = useTranslation();
+        const styles2 = react.useMultiStyleConfig("Datepicker", {});
+        return /* @__PURE__ */ React49__namespace.default.createElement(react.PopoverAnchor, null, /* @__PURE__ */ React49__namespace.default.createElement(
+          react.Box,
+          {
+            ref,
+            as: "button",
+            "aria-label": t2(texts9.openCalendar),
+            sx: styles2.calendarTriggerButton,
+            ...buttonProps
+          },
+          /* @__PURE__ */ React49__namespace.default.createElement(sporIconReact.CalendarOutline24Icon, null)
+        ));
+      }
+    );
+    texts9 = createTexts({
       openCalendar: {
         nb: "\xC5pne kalender",
         nn: "\xC5pne kalendar",
@@ -3237,317 +3267,9 @@ var init_CalendarTriggerButton = __esm({
     });
   }
 });
-var borders;
-var init_borders = __esm({
-  "src/theme/foundations/borders.ts"() {
-    borders = {
-      none: "0",
-      sm: `${tokens10__namespace.default.size.stroke.sm} solid`,
-      "sm-dashed": `${tokens10__namespace.default.size.stroke.sm} dashed`,
-      md: `${tokens10__namespace.default.size.stroke.md} solid`,
-      "md-dashed": `${tokens10__namespace.default.size.stroke.md} dashed`,
-      lg: `${tokens10__namespace.default.size.stroke.lg} solid`,
-      "lg-dashed": `${tokens10__namespace.default.size.stroke.lg} dashed`
-    };
-  }
-});
-var breakpoints;
-var init_breakpoints = __esm({
-  "src/theme/foundations/breakpoints.ts"() {
-    breakpoints = {
-      sm: tokens10__namespace.default.size.breakpoint.sm,
-      md: tokens10__namespace.default.size.breakpoint.md,
-      lg: tokens10__namespace.default.size.breakpoint.lg,
-      xl: tokens10__namespace.default.size.breakpoint.lg,
-      "2xl": tokens10__namespace.default.size.breakpoint.lg
-    };
-  }
-});
-var colors;
-var init_colors = __esm({
-  "src/theme/foundations/colors.ts"() {
-    colors = {
-      ...tokens10__namespace.default.color.alias,
-      ...tokens10__namespace.default.color.palette,
-      linjetag: tokens10__namespace.default.color.linjetag
-    };
-  }
-});
-
-// src/theme/foundations/config.ts
-var config;
-var init_config = __esm({
-  "src/theme/foundations/config.ts"() {
-    config = {
-      cssVarPrefix: "spor",
-      initialColorMode: "light",
-      useSystemColorMode: false
-    };
-  }
-});
-var fonts;
-var init_fonts = __esm({
-  "src/theme/foundations/fonts.ts"() {
-    fonts = {
-      body: tokens10__namespace.default.font.family.body,
-      heading: tokens10__namespace.default.font.family.heading,
-      mono: tokens10__namespace.default.font.family.monospace
-    };
-  }
-});
-var fontSizes;
-var init_fontSizes = __esm({
-  "src/theme/foundations/fontSizes.ts"() {
-    fontSizes = {
-      "2xs": tokens10__namespace.default.size.font.xs.mobile,
-      xs: tokens10__namespace.default.size.font.sm.mobile,
-      sm: tokens10__namespace.default.size.font.md.mobile,
-      md: tokens10__namespace.default.size.font.lg.mobile,
-      lg: tokens10__namespace.default.size.font.xl.mobile,
-      xl: tokens10__namespace.default.size.font.xxl.mobile,
-      "2xl": tokens10__namespace.default.size.font.xl.desktop,
-      "3xl": tokens10__namespace.default.size.font.xxl.desktop,
-      mobile: {
-        xs: tokens10__namespace.default.size.font.xs.mobile,
-        sm: tokens10__namespace.default.size.font.sm.mobile,
-        md: tokens10__namespace.default.size.font.md.mobile,
-        lg: tokens10__namespace.default.size.font.lg.mobile,
-        xl: tokens10__namespace.default.size.font.xl.mobile,
-        xxl: tokens10__namespace.default.size.font.xxl.mobile
-      },
-      desktop: {
-        xs: tokens10__namespace.default.size.font.xs.desktop,
-        sm: tokens10__namespace.default.size.font.sm.desktop,
-        md: tokens10__namespace.default.size.font.md.desktop,
-        lg: tokens10__namespace.default.size.font.lg.desktop,
-        xl: tokens10__namespace.default.size.font.xl.desktop,
-        xxl: tokens10__namespace.default.size.font.xxl.desktop
-      }
-    };
-  }
-});
-
-// src/theme/foundations/fontWeights.ts
-var fontWeights;
-var init_fontWeights = __esm({
-  "src/theme/foundations/fontWeights.ts"() {
-    fontWeights = {
-      light: 300,
-      medium: 400,
-      bold: 700
-    };
-  }
-});
-var lineHeights;
-var init_lineHeights = __esm({
-  "src/theme/foundations/lineHeights.ts"() {
-    lineHeights = {
-      normal: tokens10__namespace.default.font.style.lg["line-height"]
-    };
-  }
-});
-var radii;
-var init_radii = __esm({
-  "src/theme/foundations/radii.ts"() {
-    radii = {
-      none: tokens10__namespace.default.size["border-radius"].none,
-      xs: tokens10__namespace.default.size["border-radius"].xs,
-      sm: tokens10__namespace.default.size["border-radius"].sm,
-      md: tokens10__namespace.default.size["border-radius"].md,
-      lg: tokens10__namespace.default.size["border-radius"].lg,
-      xl: tokens10__namespace.default.size["border-radius"].xl,
-      "2xl": tokens10__namespace.default.size["border-radius"]["2xl"],
-      round: "50%"
-    };
-  }
-});
-var shadows;
-var init_shadows = __esm({
-  "src/theme/foundations/shadows.ts"() {
-    shadows = {
-      none: "none",
-      sm: tokens10__namespace.default.depth.shadow.sm.value,
-      md: tokens10__namespace.default.depth.shadow.md.value,
-      lg: tokens10__namespace.default.depth.shadow.lg.value
-    };
-  }
-});
-var spacing, space;
-var init_spacing = __esm({
-  "src/theme/foundations/spacing.ts"() {
-    spacing = Object.entries(tokens10__namespace.default.size.spacing).reduce(
-      (tokens14, [key, token]) => ({
-        ...tokens14,
-        [Number(key)]: token
-      }),
-      {}
-    );
-    space = spacing;
-  }
-});
-
-// src/theme/foundations/sizes.ts
-var largeSizes, container, sizes;
-var init_sizes = __esm({
-  "src/theme/foundations/sizes.ts"() {
-    init_spacing();
-    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"
-    };
-    container = {
-      sm: "640px",
-      md: "768px",
-      lg: "1024px",
-      xl: "1280px"
-    };
-    sizes = {
-      ...spacing,
-      ...largeSizes,
-      container
-    };
-  }
-});
-var textStyles;
-var init_textStyles = __esm({
-  "src/theme/foundations/textStyles.ts"() {
-    textStyles = {
-      "2xl": {
-        fontSize: [
-          tokens10__namespace.default.font.style.xxl["font-size"].mobile,
-          tokens10__namespace.default.font.style.xxl["font-size"].desktop
-        ],
-        fontFamily: tokens10__namespace.default.font.style.xxl["font-family"],
-        lineHeight: tokens10__namespace.default.font.style.xxl["line-height"]
-      },
-      "xl-display": {
-        fontSize: [
-          tokens10__namespace.default.font.style["xl-display"]["font-size"].mobile,
-          tokens10__namespace.default.font.style["xl-display"]["font-size"].desktop
-        ],
-        fontFamily: tokens10__namespace.default.font.style["xl-display"]["font-family"],
-        lineHeight: tokens10__namespace.default.font.style["xl-display"]["line-height"]
-      },
-      "xl-sans": {
-        fontSize: [
-          tokens10__namespace.default.font.style["xl-sans"]["font-size"].mobile,
-          tokens10__namespace.default.font.style["xl-sans"]["font-size"].desktop
-        ],
-        fontFamily: tokens10__namespace.default.font.style["xl-sans"]["font-family"],
-        lineHeight: tokens10__namespace.default.font.style["xl-sans"]["line-height"]
-      },
-      lg: {
-        fontSize: [
-          tokens10__namespace.default.font.style.lg["font-size"].mobile,
-          tokens10__namespace.default.font.style.lg["font-size"].desktop
-        ],
-        fontFamily: tokens10__namespace.default.font.style.lg["font-family"],
-        lineHeight: tokens10__namespace.default.font.style.lg["line-height"]
-      },
-      md: {
-        fontSize: [
-          tokens10__namespace.default.font.style.md["font-size"].mobile,
-          tokens10__namespace.default.font.style.md["font-size"].desktop
-        ],
-        fontFamily: tokens10__namespace.default.font.style.md["font-family"],
-        lineHeight: tokens10__namespace.default.font.style.md["line-height"]
-      },
-      sm: {
-        fontSize: [
-          tokens10__namespace.default.font.style.sm["font-size"].mobile,
-          tokens10__namespace.default.font.style.sm["font-size"].desktop
-        ],
-        fontFamily: tokens10__namespace.default.font.style.sm["font-family"],
-        lineHeight: tokens10__namespace.default.font.style.sm["line-height"]
-      },
-      xs: {
-        fontSize: [
-          tokens10__namespace.default.font.style.xs["font-size"].mobile,
-          tokens10__namespace.default.font.style.xs["font-size"].desktop
-        ],
-        fontFamily: tokens10__namespace.default.font.style.xs["font-family"],
-        lineHeight: tokens10__namespace.default.font.style.xs["line-height"]
-      }
-    };
-  }
-});
-var zIndices;
-var init_zIndices = __esm({
-  "src/theme/foundations/zIndices.ts"() {
-    zIndices = {
-      hide: tokens10__namespace.default.depth["z-index"].hide,
-      auto: "auto",
-      base: tokens10__namespace.default.depth["z-index"].base,
-      docked: tokens10__namespace.default.depth["z-index"].docked,
-      dropdown: tokens10__namespace.default.depth["z-index"].dropdown,
-      sticky: tokens10__namespace.default.depth["z-index"].sticky,
-      banner: tokens10__namespace.default.depth["z-index"].banner,
-      overlay: tokens10__namespace.default.depth["z-index"].overlay,
-      modal: tokens10__namespace.default.depth["z-index"].modal,
-      popover: tokens10__namespace.default.depth["z-index"].popover,
-      skipLink: tokens10__namespace.default.depth["z-index"].skipLink,
-      toast: tokens10__namespace.default.depth["z-index"].toast,
-      tooltip: tokens10__namespace.default.depth["z-index"].tooltip
-    };
-  }
-});
-
-// 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 init_foundations = __esm({
-  "src/theme/foundations/index.ts"() {
-    init_borders();
-    init_breakpoints();
-    init_colors();
-    init_config();
-    init_fonts();
-    init_fontSizes();
-    init_fontWeights();
-    init_lineHeights();
-    init_radii();
-    init_shadows();
-    init_sizes();
-    init_spacing();
-    init_textStyles();
-    init_zIndices();
-  }
-});
 var DateTimeSegment, isPaddable;
 var init_DateTimeSegment = __esm({
   "src/datepicker/DateTimeSegment.tsx"() {
-    init_foundations();
     DateTimeSegment = React49.forwardRef(
       ({ segment, state: state2 }, externalRef) => {
         const internalRef = React49.useRef(null);
@@ -3569,14 +3291,13 @@ var init_DateTimeSegment = __esm({
             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",
@@ -3690,6 +3411,7 @@ var init_DatePicker = __esm({
         errorMessage,
         minHeight,
         showYearNavigation,
+        withPortal = true,
         width = "auto",
         ...props
       }, externalRef) => {
@@ -3716,21 +3438,22 @@ var init_DatePicker = __esm({
           state2,
           ref
         );
-        const responsiveVariant = react.useBreakpointValue(typeof variant === "string" ? [variant] : variant) ?? "simple";
+        const styles2 = react.useMultiStyleConfig("Datepicker", {});
         const locale = useCurrentLocale();
-        const handleEnterClick = (e) => {
-          if (responsiveVariant === "simple" && e.key === "Enter" && !state2.isOpen) {
-            e.stopPropagation();
-            state2.setOpen(true);
-          }
-        };
+        const responsiveVariant = react.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 = react.useMultiStyleConfig("Datepicker", {});
+        const popoverContent = /* @__PURE__ */ React49__namespace.default.createElement(react.PopoverContent, { color: "darkGrey", boxShadow: "md", sx: styles2.calendar }, /* @__PURE__ */ React49__namespace.default.createElement(react.PopoverArrow, { sx: styles2.arrow }), /* @__PURE__ */ React49__namespace.default.createElement(react.PopoverBody, null, /* @__PURE__ */ React49__namespace.default.createElement(react.FocusLock, null, /* @__PURE__ */ React49__namespace.default.createElement(
+          Calendar,
+          {
+            ...calendarProps,
+            showYearNavigation
+          }
+        ))));
         return /* @__PURE__ */ React49__namespace.default.createElement(reactAria.I18nProvider, { locale }, /* @__PURE__ */ React49__namespace.default.createElement(
           react.Box,
           {
@@ -3744,18 +3467,14 @@ var init_DatePicker = __esm({
             {
               ...dialogProps,
               isOpen: state2.isOpen,
-              onClose: state2.close,
               onOpen: state2.open,
-              closeOnBlur: true,
-              closeOnEsc: true,
-              returnFocusOnClose: true
+              onClose: state2.close
             },
             /* @__PURE__ */ React49__namespace.default.createElement(react.InputGroup, { ...groupProps, display: "inline-flex" }, /* @__PURE__ */ React49__namespace.default.createElement(react.PopoverAnchor, null, /* @__PURE__ */ React49__namespace.default.createElement(
               StyledField,
               {
                 variant: responsiveVariant,
                 onClick: onFieldClick,
-                onKeyPress: handleEnterClick,
                 paddingX: 3,
                 minHeight
               },
@@ -3766,28 +3485,14 @@ var init_DatePicker = __esm({
                   label: props.label,
                   labelProps,
                   name: props.name,
-                  ref,
+                  ref: hasTrigger ? void 0 : ref,
                   ...fieldProps
                 }
               )
-            )), hasTrigger && /* @__PURE__ */ React49__namespace.default.createElement(CalendarTriggerButton, { ...buttonProps })),
+            )), hasTrigger && /* @__PURE__ */ React49__namespace.default.createElement(react.PopoverTrigger, null, /* @__PURE__ */ React49__namespace.default.createElement(CalendarTriggerButton, { ref, ...buttonProps }))),
             /* @__PURE__ */ React49__namespace.default.createElement(exports.FormErrorMessage, { ...errorMessageProps }, errorMessage),
-            state2.isOpen && !props.isDisabled && /* @__PURE__ */ React49__namespace.default.createElement(react.Portal, null, /* @__PURE__ */ React49__namespace.default.createElement(
-              react.PopoverContent,
-              {
-                color: "darkGrey",
-                boxShadow: "md",
-                sx: styles2.calendar
-              },
-              /* @__PURE__ */ React49__namespace.default.createElement(react.PopoverArrow, { sx: styles2.arrow }),
-              /* @__PURE__ */ React49__namespace.default.createElement(react.PopoverBody, null, /* @__PURE__ */ React49__namespace.default.createElement(
-                Calendar,
-                {
-                  ...calendarProps,
-                  showYearNavigation
-                }
-              ))
-            ))
+            state2.isOpen && !props.isDisabled && withPortal && /* @__PURE__ */ React49__namespace.default.createElement(react.Portal, null, popoverContent),
+            state2.isOpen && !props.isDisabled && !withPortal && popoverContent
           )
         ));
       }
@@ -3819,6 +3524,7 @@ function DateRangePicker({
   minHeight,
   startName,
   endName,
+  withPortal = true,
   ...props
 }) {
   const formControlProps = react.useFormControlContext();
@@ -3855,67 +3561,49 @@ function DateRangePicker({
     }
   };
   const hasTrigger = responsiveVariant === "with-trigger";
+  const popoverContent = /* @__PURE__ */ React49__namespace.default.createElement(react.PopoverContent, { sx: styles2.calendar, boxShadow: "md", maxWidth: "none" }, /* @__PURE__ */ React49__namespace.default.createElement(react.PopoverArrow, { sx: styles2.arrow }), /* @__PURE__ */ React49__namespace.default.createElement(react.PopoverBody, null, /* @__PURE__ */ React49__namespace.default.createElement(react.FocusLock, null, /* @__PURE__ */ React49__namespace.default.createElement(RangeCalendar, { ...calendarProps }))));
   return /* @__PURE__ */ React49__namespace.default.createElement(reactAria.I18nProvider, { locale }, /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { position: "relative", display: "inline-flex", flexDirection: "column" }, props.label && /* @__PURE__ */ React49__namespace.default.createElement(react.FormLabel, { ...labelProps, sx: styles2.inputLabel }, props.label), /* @__PURE__ */ React49__namespace.default.createElement(
     react.Popover,
     {
       ...dialogProps,
       isOpen: state2.isOpen,
-      onClose: () => state2.setOpen(false),
-      closeOnBlur: true,
-      closeOnEsc: true,
-      returnFocusOnClose: true
+      onOpen: state2.open,
+      onClose: state2.close
     },
-    /* @__PURE__ */ React49__namespace.default.createElement(
-      react.InputGroup,
+    /* @__PURE__ */ React49__namespace.default.createElement(react.InputGroup, { ...groupProps, width: "auto", display: "inline-flex" }, /* @__PURE__ */ React49__namespace.default.createElement(react.PopoverAnchor, null, /* @__PURE__ */ React49__namespace.default.createElement(
+      StyledField,
       {
-        ...groupProps,
-        ref,
-        width: "auto",
-        display: "inline-flex"
+        alignItems: "center",
+        paddingX: 3,
+        variant: responsiveVariant,
+        onClick: onFieldClick,
+        onKeyPress: handleEnterClick,
+        minHeight
       },
-      /* @__PURE__ */ React49__namespace.default.createElement(react.PopoverAnchor, null, /* @__PURE__ */ React49__namespace.default.createElement(
-        StyledField,
+      !hasTrigger && /* @__PURE__ */ React49__namespace.default.createElement(sporIconReact.CalendarOutline24Icon, { mr: 2, alignSelf: "center" }),
+      /* @__PURE__ */ React49__namespace.default.createElement(
+        DateField,
         {
-          alignItems: "center",
-          paddingX: 3,
-          variant: responsiveVariant,
-          onClick: onFieldClick,
-          onKeyPress: handleEnterClick,
-          minHeight
-        },
-        !hasTrigger && /* @__PURE__ */ React49__namespace.default.createElement(sporIconReact.CalendarOutline24Icon, { mr: 2, alignSelf: "center" }),
-        /* @__PURE__ */ React49__namespace.default.createElement(
-          DateField,
-          {
-            ...startFieldProps,
-            name: startName,
-            label: props.startLabel,
-            labelProps
-          }
-        ),
-        /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { as: "span", "aria-hidden": "true", px: "2" }, "\u2013"),
-        /* @__PURE__ */ React49__namespace.default.createElement(
-          DateField,
-          {
-            ...endFieldProps,
-            name: endName,
-            label: props.endLabel,
-            labelProps
-          }
-        )
-      )),
-      hasTrigger && /* @__PURE__ */ React49__namespace.default.createElement(CalendarTriggerButton, { ...buttonProps })
-    ),
-    state2.isOpen && /* @__PURE__ */ React49__namespace.default.createElement(react.Portal, null, /* @__PURE__ */ React49__namespace.default.createElement(
-      react.PopoverContent,
-      {
-        sx: styles2.calendar,
-        boxShadow: "md",
-        maxWidth: "none"
-      },
-      /* @__PURE__ */ React49__namespace.default.createElement(react.PopoverArrow, { sx: styles2.arrow }),
-      /* @__PURE__ */ React49__namespace.default.createElement(react.PopoverBody, null, /* @__PURE__ */ React49__namespace.default.createElement(RangeCalendar, { ...calendarProps }))
-    ))
+          ...startFieldProps,
+          name: startName,
+          label: props.startLabel,
+          ref: hasTrigger ? void 0 : ref,
+          labelProps
+        }
+      ),
+      /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { as: "span", "aria-hidden": "true", px: "2" }, "\u2013"),
+      /* @__PURE__ */ React49__namespace.default.createElement(
+        DateField,
+        {
+          ...endFieldProps,
+          name: endName,
+          label: props.endLabel,
+          labelProps
+        }
+      )
+    )), hasTrigger && /* @__PURE__ */ React49__namespace.default.createElement(react.PopoverTrigger, null, /* @__PURE__ */ React49__namespace.default.createElement(CalendarTriggerButton, { ref, ...buttonProps }))),
+    state2.isOpen && withPortal && /* @__PURE__ */ React49__namespace.default.createElement(react.Portal, null, popoverContent),
+    state2.isOpen && !withPortal && popoverContent
   )));
 }
 var init_DateRangePicker = __esm({
@@ -3960,7 +3648,7 @@ var init_TimeField = __esm({
     };
   }
 });
-exports.TimePicker = void 0; var texts9;
+exports.TimePicker = void 0; var texts10;
 var init_TimePicker = __esm({
   "src/datepicker/TimePicker.tsx"() {
     init_src();
@@ -3982,7 +3670,7 @@ var init_TimePicker = __esm({
       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 = reactStately.useTimeFieldState({
         value,
         defaultValue,
@@ -4015,15 +3703,15 @@ var init_TimePicker = __esm({
           })
         );
       };
-      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__namespace.default.createElement(
         StyledField,
@@ -4072,7 +3760,7 @@ var init_TimePicker = __esm({
         )
       );
     };
-    texts9 = createTexts({
+    texts10 = createTexts({
       selectedTimeIs: (time) => ({
         nb: `Valgt tidspunkt er ${time}`,
         nn: `Valt tidspunkt er ${time}`,
@@ -5399,6 +5087,16 @@ function Option({ item, state: state2 }) {
   if (isFocused) {
     dataFields["data-focus"] = true;
   }
+  React49.useEffect(() => {
+    var _a6;
+    (_a6 = ref == null ? void 0 : ref.current) == null ? void 0 : _a6.addEventListener(
+      "touchend",
+      (event) => {
+        event.preventDefault();
+      },
+      { passive: false, once: true }
+    );
+  }, []);
   return /* @__PURE__ */ React49__namespace.default.createElement(OptionContext.Provider, { value: { labelProps, descriptionProps } }, /* @__PURE__ */ React49__namespace.default.createElement(react.ListItem, { ...optionProps, ...dataFields, ref, sx: styles2.item }, item.rendered));
 }
 function ListBoxSection({ section, state: state2 }) {
@@ -5489,7 +5187,7 @@ function InfoSelect({
       "aria-invalid": formControl.isInvalid,
       "aria-describedby": formControl["aria-describedby"]
     },
-    /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { ...valueProps }, state2.selectedItem ? state2.selectedItem.textValue ?? state2.selectedItem.rendered : placeholder ?? t2(texts10.selectAnOption)),
+    /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { ...valueProps }, state2.selectedItem ? state2.selectedItem.textValue ?? state2.selectedItem.rendered : placeholder ?? t2(texts11.selectAnOption)),
     /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { sx: styles2.arrowIcon }, state2.isOpen ? /* @__PURE__ */ React49__namespace.default.createElement(sporIconReact.DropdownUpFill24Icon, null) : /* @__PURE__ */ React49__namespace.default.createElement(sporIconReact.DropdownDownFill24Icon, null))
   ), state2.isOpen && /* @__PURE__ */ React49__namespace.default.createElement(Popover3, { state: state2, triggerRef }, /* @__PURE__ */ React49__namespace.default.createElement(
     ListBox,
@@ -5502,13 +5200,13 @@ function InfoSelect({
     props.children
   )));
 }
-var texts10;
+var texts11;
 var init_InfoSelect = __esm({
   "src/input/InfoSelect.tsx"() {
     init_src();
     init_ListBox();
     init_Popover();
-    texts10 = createTexts({
+    texts11 = createTexts({
       selectAnOption: {
         nb: "Velg et alternativ",
         nn: "Velg eit alternativ",
@@ -5573,6 +5271,27 @@ var init_NativeSelect = __esm({
     );
   }
 });
+var colors;
+var init_colors = __esm({
+  "src/theme/foundations/colors.ts"() {
+    colors = {
+      ...tokens10__namespace.default.color.alias,
+      ...tokens10__namespace.default.color.palette,
+      linjetag: tokens10__namespace.default.color.linjetag
+    };
+  }
+});
+var shadows;
+var init_shadows = __esm({
+  "src/theme/foundations/shadows.ts"() {
+    shadows = {
+      none: "none",
+      sm: tokens10__namespace.default.depth.shadow.sm.value,
+      md: tokens10__namespace.default.depth.shadow.md.value,
+      lg: tokens10__namespace.default.depth.shadow.lg.value
+    };
+  }
+});
 
 // src/theme/utils/box-shadow-utils.ts
 var getBoxShadowString;
@@ -5647,7 +5366,7 @@ function NumericStepper({
     VerySmallButton,
     {
       icon: /* @__PURE__ */ React49__namespace.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
@@ -5707,7 +5426,7 @@ function NumericStepper({
     {
       fontSize: "sm",
       fontWeight: "bold",
-      width: "3ch",
+      width: "4ch",
       marginX: 1,
       paddingX: 1,
       textAlign: "center",
@@ -5721,7 +5440,7 @@ function NumericStepper({
     VerySmallButton,
     {
       icon: /* @__PURE__ */ React49__namespace.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,
@@ -5729,7 +5448,7 @@ function NumericStepper({
     }
   ));
 }
-var VerySmallButton, SubtractIcon, AddIcon, texts11;
+var VerySmallButton, SubtractIcon, AddIcon, texts12;
 var init_NumericStepper = __esm({
   "src/input/NumericStepper.tsx"() {
     init_src();
@@ -5808,7 +5527,7 @@ var init_NumericStepper = __esm({
         }
       )
     );
-    texts11 = createTexts({
+    texts12 = createTexts({
       decrementButtonAriaLabel: {
         nb: "Trekk fra 1",
         en: "Subtract 1",
@@ -5824,7 +5543,7 @@ var init_NumericStepper = __esm({
     });
   }
 });
-exports.PasswordInput = void 0; var texts12;
+exports.PasswordInput = void 0; var texts13;
 var init_PasswordInput = __esm({
   "src/input/PasswordInput.tsx"() {
     init_input();
@@ -5857,11 +5576,11 @@ var init_PasswordInput = __esm({
             borderRadius: "sm",
             mr: 1
           },
-          isShowingPassword ? t2(texts12.hidePassword) : t2(texts12.showPassword)
+          isShowingPassword ? t2(texts13.hidePassword) : t2(texts13.showPassword)
         )));
       }
     );
-    texts12 = createTexts({
+    texts13 = createTexts({
       showPassword: {
         nb: "Vis",
         nn: "Vis",
@@ -12371,7 +12090,7 @@ __export(CountryCodeSelect_exports, {
   CountryCodeSelect: () => CountryCodeSelect,
   default: () => CountryCodeSelect_default
 });
-var prioritizedCountryCodes, sortedCallingCodes, callingCodes, CountryCodeSelect, CountryCodeSelect_default, texts13;
+var prioritizedCountryCodes, sortedCallingCodes, callingCodes, CountryCodeSelect, CountryCodeSelect_default, texts14;
 var init_CountryCodeSelect = __esm({
   "src/input/CountryCodeSelect.tsx"() {
     init_src();
@@ -12393,7 +12112,7 @@ var init_CountryCodeSelect = __esm({
       return /* @__PURE__ */ React49__namespace.default.createElement(
         InfoSelect,
         {
-          label: t2(texts13.countryCode),
+          label: t2(texts14.countryCode),
           isLabelSrOnly: true,
           items: callingCodes,
           ...props
@@ -12402,7 +12121,7 @@ var init_CountryCodeSelect = __esm({
       );
     };
     CountryCodeSelect_default = CountryCodeSelect;
-    texts13 = createTexts({
+    texts14 = createTexts({
       countryCode: {
         nb: "Landkode",
         nn: "Landskode",
@@ -12412,7 +12131,7 @@ var init_CountryCodeSelect = __esm({
     });
   }
 });
-exports.PhoneNumberInput = void 0; var texts14, LazyCountryCodeSelect;
+exports.PhoneNumberInput = void 0; var texts15, LazyCountryCodeSelect;
 var init_PhoneNumberInput = __esm({
   "src/input/PhoneNumberInput.tsx"() {
     init_src();
@@ -12461,7 +12180,7 @@ var init_PhoneNumberInput = __esm({
           {
             ref,
             type: "tel",
-            label: t2(texts14.phoneNumber),
+            label: t2(texts15.phoneNumber),
             value: value.nationalNumber,
             name: name ? `${name}-phone-number` : "phone-number",
             onChange: (e) => {
@@ -12477,7 +12196,7 @@ var init_PhoneNumberInput = __esm({
         ));
       }
     );
-    texts14 = createTexts({
+    texts15 = createTexts({
       phoneNumber: {
         nb: "Telefonnummer",
         nn: "Telefonnummer",
@@ -12506,7 +12225,7 @@ var init_RadioGroup = __esm({
     );
   }
 });
-exports.SearchInput = void 0; var texts15;
+exports.SearchInput = void 0; var texts16;
 var init_SearchInput = __esm({
   "src/input/SearchInput.tsx"() {
     init_input();
@@ -12535,21 +12254,21 @@ var init_SearchInput = __esm({
             placeholder: " ",
             "data-attachable": true
           }
-        ), /* @__PURE__ */ React49__namespace.default.createElement(exports.FormLabel, { htmlFor: inputId, pointerEvents: "none" }, label ?? t2(texts15.label)), showClearButton && /* @__PURE__ */ React49__namespace.default.createElement(exports.InputRightElement, { width: "fit-content" }, /* @__PURE__ */ React49__namespace.default.createElement(
+        ), /* @__PURE__ */ React49__namespace.default.createElement(exports.FormLabel, { htmlFor: inputId, pointerEvents: "none" }, label ?? t2(texts16.label)), showClearButton && /* @__PURE__ */ React49__namespace.default.createElement(exports.InputRightElement, { width: "fit-content" }, /* @__PURE__ */ React49__namespace.default.createElement(
           react.IconButton,
           {
             variant: "ghost",
             type: "button",
             size: "sm",
             mr: 1,
-            "aria-label": t2(texts15.reset),
+            "aria-label": t2(texts16.reset),
             icon: /* @__PURE__ */ React49__namespace.default.createElement(sporIconReact.CloseOutline24Icon, null),
             onClick: onReset
           }
         )));
       }
     );
-    texts15 = createTexts({
+    texts16 = createTexts({
       label: {
         nb: "S\xF8k",
         nn: "S\xF8k",
@@ -12809,7 +12528,7 @@ var init_linjetag = __esm({
     init_TravelTag();
   }
 });
-exports.TextLink = void 0; var texts16;
+exports.TextLink = void 0; var texts17;
 var init_TextLink = __esm({
   "src/link/TextLink.tsx"() {
     init_src();
@@ -12822,12 +12541,12 @@ var init_TextLink = __esm({
           sporIconReact.LinkOutOutline24Icon,
           {
             marginLeft: 0.5,
-            "aria-label": t2(texts16.externalLink)
+            "aria-label": t2(texts17.externalLink)
           }
         ));
       }
     );
-    texts16 = createTexts({
+    texts17 = createTexts({
       externalLink: {
         nb: "Ekstern lenke",
         nn: "Ekstern lenke",
@@ -13037,7 +12756,7 @@ var init_icons2 = __esm({
     ));
   }
 });
-exports.JumpButton = void 0; var texts17;
+exports.JumpButton = void 0; var texts18;
 var init_JumpButton = __esm({
   "src/media-controller/JumpButton.tsx"() {
     init_src();
@@ -13058,14 +12777,14 @@ var init_JumpButton = __esm({
         {
           as: "button",
           sx: styles2.container,
-          "aria-label": direction2 === "forward" ? t2(texts17.forward) : t2(texts17.backward),
+          "aria-label": direction2 === "forward" ? t2(texts18.forward) : t2(texts18.backward),
           disabled: isDisabled,
           ...props
         },
         direction2 === "forward" ? /* @__PURE__ */ React49__namespace.default.createElement(JumpForwardIcon, { sx: styles2.icon }) : /* @__PURE__ */ React49__namespace.default.createElement(JumpBackwardIcon, { sx: styles2.icon })
       );
     };
-    texts17 = createTexts({
+    texts18 = createTexts({
       forward: {
         nb: "15 sekunder frem",
         nn: "15 sekunder fram",
@@ -13081,7 +12800,7 @@ var init_JumpButton = __esm({
     });
   }
 });
-exports.PlayPauseButton = void 0; var texts18;
+exports.PlayPauseButton = void 0; var texts19;
 var init_PlayPauseButton = __esm({
   "src/media-controller/PlayPauseButton.tsx"() {
     init_src();
@@ -13102,14 +12821,14 @@ var init_PlayPauseButton = __esm({
         {
           as: "button",
           sx: styles2.container,
-          "aria-label": isPlaying ? t2(texts18.pause) : t2(texts18.play),
+          "aria-label": isPlaying ? t2(texts19.pause) : t2(texts19.play),
           disabled: isDisabled,
           ...props
         },
         isPlaying ? /* @__PURE__ */ React49__namespace.default.createElement(PauseIcon, { sx: styles2.icon }) : /* @__PURE__ */ React49__namespace.default.createElement(PlayIcon, { sx: styles2.icon })
       );
     };
-    texts18 = createTexts({
+    texts19 = createTexts({
       pause: {
         nb: "Pause",
         nn: "Pause",
@@ -13125,7 +12844,7 @@ var init_PlayPauseButton = __esm({
     });
   }
 });
-exports.SkipButton = void 0; var texts19;
+exports.SkipButton = void 0; var texts20;
 var init_SkipButton = __esm({
   "src/media-controller/SkipButton.tsx"() {
     init_src();
@@ -13146,14 +12865,14 @@ var init_SkipButton = __esm({
         {
           as: "button",
           sx: styles2.container,
-          "aria-label": direction2 === "forward" ? t2(texts19.next) : t2(texts19.previous),
+          "aria-label": direction2 === "forward" ? t2(texts20.next) : t2(texts20.previous),
           disabled: isDisabled,
           ...props
         },
         direction2 === "forward" ? /* @__PURE__ */ React49__namespace.default.createElement(SkipNextIcon, { sx: styles2.icon }) : /* @__PURE__ */ React49__namespace.default.createElement(SkipPreviousIcon, { sx: styles2.icon })
       );
     };
-    texts19 = createTexts({
+    texts20 = createTexts({
       next: {
         nb: "Neste",
         nn: "Neste",
@@ -13295,7 +13014,7 @@ var init_modal = __esm({
     init_SimpleDrawer();
   }
 });
-exports.PopoverWizardBody = void 0; var StepIndicator, createRange, NextStepButton, texts20;
+exports.PopoverWizardBody = void 0; var StepIndicator, createRange, NextStepButton, texts21;
 var init_PopoverWizardBody = __esm({
   "src/popover/PopoverWizardBody.tsx"() {
     init_src();
@@ -13347,10 +13066,10 @@ var init_PopoverWizardBody = __esm({
           leftIcon: isLastStep ? void 0 : /* @__PURE__ */ React49__namespace.createElement(sporIconReact.ArrowRightFill18Icon, null),
           onClick: isLastStep ? onClose : onNext
         },
-        t2(isLastStep ? texts20.finish : texts20.nextStep)
+        t2(isLastStep ? texts21.finish : texts21.nextStep)
       );
     };
-    texts20 = createTexts({
+    texts21 = createTexts({
       nextStep: {
         nb: "Neste",
         nn: "Neste",
@@ -13479,7 +13198,7 @@ var init_StepperContext = __esm({
     };
   }
 });
-exports.Stepper = void 0; var texts21;
+exports.Stepper = void 0; var texts22;
 var init_Stepper = __esm({
   "src/stepper/Stepper.tsx"() {
     init_stepper();
@@ -13508,7 +13227,7 @@ var init_Stepper = __esm({
         /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { __css: style.container }, /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { __css: style.innerContainer }, /* @__PURE__ */ React49__namespace.default.createElement(react.HStack, null, activeStep > 1 && /* @__PURE__ */ React49__namespace.default.createElement(
           exports.IconButton,
           {
-            "aria-label": t2(texts21.back),
+            "aria-label": t2(texts22.back),
             icon: /* @__PURE__ */ React49__namespace.default.createElement(sporIconReact.DropdownLeftFill24Icon, null),
             variant: "ghost",
             size: "sm",
@@ -13518,14 +13237,14 @@ var init_Stepper = __esm({
         ), /* @__PURE__ */ React49__namespace.default.createElement(
           exports.SimplePopover,
           {
-            triggerElement: /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { as: "button", __css: style.stepCounter }, t2(texts21.stepsOf(activeStep, numberOfSteps))),
+            triggerElement: /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { as: "button", __css: style.stepCounter }, t2(texts22.stepsOf(activeStep, numberOfSteps))),
             borderRadius: "xs"
           },
           steps.map((step, index2) => /* @__PURE__ */ React49__namespace.default.createElement(exports.StepperStep, { key: step, stepNumber: index2 + 1 }, step))
         )), title && /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { as: "h3", __css: style.title }, title)), /* @__PURE__ */ React49__namespace.default.createElement(react.Flex, { justifyContent: "center", display: ["none", "flex"] }, steps.map((step, index2) => /* @__PURE__ */ React49__namespace.default.createElement(exports.StepperStep, { key: index2, stepNumber: index2 + 1 }, step))))
       ));
     };
-    texts21 = createTexts({
+    texts22 = createTexts({
       stepsOf: (activeStep, numberOfSteps) => ({
         nb: `Steg ${activeStep} av ${numberOfSteps}`,
         nn: `Steg ${activeStep} av ${numberOfSteps}`,
@@ -13677,11 +13396,11 @@ var init_chunk_RXCYWA6Q = __esm({
 });
 
 // ../../node_modules/@chakra-ui/theme/dist/chunk-5QZEG2IM.mjs
-var zIndices2, z_index_default;
+var zIndices, z_index_default;
 var init_chunk_5QZEG2IM = __esm({
   "../../node_modules/@chakra-ui/theme/dist/chunk-5QZEG2IM.mjs"() {
     "use client";
-    zIndices2 = {
+    zIndices = {
       hide: -1,
       auto: "auto",
       base: 0,
@@ -13696,32 +13415,32 @@ var init_chunk_5QZEG2IM = __esm({
       toast: 1700,
       tooltip: 1800
     };
-    z_index_default = zIndices2;
+    z_index_default = zIndices;
   }
 });
 
 // ../../node_modules/@chakra-ui/theme/dist/chunk-PE5G6LAZ.mjs
-var borders2, borders_default;
+var borders, borders_default;
 var init_chunk_PE5G6LAZ = __esm({
   "../../node_modules/@chakra-ui/theme/dist/chunk-PE5G6LAZ.mjs"() {
     "use client";
-    borders2 = {
+    borders = {
       none: 0,
       "1px": "1px solid",
       "2px": "2px solid",
       "4px": "4px solid",
       "8px": "8px solid"
     };
-    borders_default = borders2;
+    borders_default = borders;
   }
 });
 
 // ../../node_modules/@chakra-ui/theme/dist/chunk-ZCARTYDH.mjs
-var breakpoints2, breakpoints_default;
+var breakpoints, breakpoints_default;
 var init_chunk_ZCARTYDH = __esm({
   "../../node_modules/@chakra-ui/theme/dist/chunk-ZCARTYDH.mjs"() {
     "use client";
-    breakpoints2 = {
+    breakpoints = {
       base: "0em",
       sm: "30em",
       md: "48em",
@@ -13729,7 +13448,7 @@ var init_chunk_ZCARTYDH = __esm({
       xl: "80em",
       "2xl": "96em"
     };
-    breakpoints_default = breakpoints2;
+    breakpoints_default = breakpoints;
   }
 });
 
@@ -13965,11 +13684,11 @@ var init_chunk_OFZWI3IK = __esm({
 });
 
 // ../../node_modules/@chakra-ui/theme/dist/chunk-AMMMMB27.mjs
-var radii2, radius_default;
+var radii, radius_default;
 var init_chunk_AMMMMB27 = __esm({
   "../../node_modules/@chakra-ui/theme/dist/chunk-AMMMMB27.mjs"() {
     "use client";
-    radii2 = {
+    radii = {
       none: "0",
       sm: "0.125rem",
       base: "0.25rem",
@@ -13980,7 +13699,7 @@ var init_chunk_AMMMMB27 = __esm({
       "3xl": "1.5rem",
       full: "9999px"
     };
-    radius_default = radii2;
+    radius_default = radii;
   }
 });
 
@@ -14095,11 +13814,11 @@ var init_chunk_VW4MZLZF = __esm({
 });
 
 // ../../node_modules/@chakra-ui/theme/dist/chunk-NIUVG5KM.mjs
-var spacing2;
+var spacing;
 var init_chunk_NIUVG5KM = __esm({
   "../../node_modules/@chakra-ui/theme/dist/chunk-NIUVG5KM.mjs"() {
     "use client";
-    spacing2 = {
+    spacing = {
       px: "1px",
       0.5: "0.125rem",
       1: "0.25rem",
@@ -14138,11 +13857,11 @@ var init_chunk_NIUVG5KM = __esm({
 });
 
 // ../../node_modules/@chakra-ui/theme/dist/chunk-QH74K4BV.mjs
-var largeSizes2, container2, sizes2, sizes_default;
+var largeSizes, container, sizes, sizes_default;
 var init_chunk_QH74K4BV = __esm({
   "../../node_modules/@chakra-ui/theme/dist/chunk-QH74K4BV.mjs"() {
     init_chunk_NIUVG5KM();
-    largeSizes2 = {
+    largeSizes = {
       max: "max-content",
       min: "min-content",
       full: "100%",
@@ -14162,18 +13881,18 @@ var init_chunk_QH74K4BV = __esm({
       "8xl": "90rem",
       prose: "60ch"
     };
-    container2 = {
+    container = {
       sm: "640px",
       md: "768px",
       lg: "1024px",
       xl: "1280px"
     };
-    sizes2 = {
-      ...spacing2,
-      ...largeSizes2,
-      container: container2
+    sizes = {
+      ...spacing,
+      ...largeSizes,
+      container
     };
-    sizes_default = sizes2;
+    sizes_default = sizes;
   }
 });
 
@@ -14201,7 +13920,7 @@ var init_chunk_5FMCT5RQ = __esm({
       ...typography_default,
       sizes: sizes_default,
       shadows: shadows_default,
-      space: spacing2,
+      space: spacing,
       borders: borders_default,
       transition: transition_default
     };
@@ -14379,7 +14098,7 @@ function createMultiStyleConfigHelpers(parts14) {
     }
   };
 }
-var import_lodash3, isImportant, withoutImportant, tokenToCSSVar, pipe, getRtl, transformTemplate, filterTemplate, backdropFilterTemplate, flexDirectionTemplate, directionMap, valueSet, globalSet, trimSpace, isCSSFunction, gradientTransform, analyzeCSSValue, wrap, transformFunctions, t, background, border, color, effect, filter, flexbox, grid, interactivity, layout, list, memoize, memoizedGet, srOnly, srFocusable, getWithPriority, others, position, ring, space2, textDecoration, transform, transition2, typography2, scroll, toExpression, add, subtract, multiply, divide, negate, calc, state, toGroup, toPeer, merge, pseudoSelectors, pseudoPropNames, systemProps;
+var import_lodash3, isImportant, withoutImportant, tokenToCSSVar, pipe, getRtl, transformTemplate, filterTemplate, backdropFilterTemplate, flexDirectionTemplate, directionMap, valueSet, globalSet, trimSpace, isCSSFunction, gradientTransform, analyzeCSSValue, wrap, transformFunctions, t, background, border, color, effect, filter, flexbox, grid, interactivity, layout, list, memoize, memoizedGet, srOnly, srFocusable, getWithPriority, others, position, ring, space, textDecoration, transform, transition2, typography2, scroll, toExpression, add, subtract, multiply, divide, negate, calc, state, toGroup, toPeer, merge, pseudoSelectors, pseudoPropNames, systemProps;
 var init_dist3 = __esm({
   "../../node_modules/@chakra-ui/styled-system/dist/index.mjs"() {
     init_dist2();
@@ -15019,7 +14738,7 @@ var init_dist3 = __esm({
       ringOffsetColor: t.colors("--chakra-ring-offset-color"),
       ringInset: t.prop("--chakra-ring-inset")
     };
-    space2 = {
+    space = {
       margin: t.spaceT("margin"),
       marginTop: t.spaceT("marginTop"),
       marginBlockStart: t.spaceT("marginBlockStart"),
@@ -15047,29 +14766,29 @@ var init_dist3 = __esm({
       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
     });
     textDecoration = {
       textDecorationColor: t.colors("textDecorationColor"),
@@ -15288,7 +15007,7 @@ var init_dist3 = __esm({
       others,
       position,
       effect,
-      space2,
+      space,
       scroll,
       typography2,
       textDecoration,
@@ -15296,7 +15015,7 @@ var init_dist3 = __esm({
       list,
       transition2
     );
-    Object.assign({}, space2, layout, flexbox, grid, position);
+    Object.assign({}, space, layout, flexbox, grid, position);
     [...Object.keys(systemProps), ...pseudoPropNames];
     ({ ...systemProps, ...pseudoSelectors });
   }
@@ -15633,7 +15352,7 @@ var init_dist4 = __esm({
     init_chunk_7LPD4XZ3();
   }
 });
-var defineMultiStyleConfig2, definePartsStyle2, $width, $height, $diff, diffValue, $translateX, $bg, baseStyleTrack, baseStyleThumb, baseStyle2, sizes3, switchTheme;
+var defineMultiStyleConfig2, definePartsStyle2, $width, $height, $diff, diffValue, $translateX, $bg, baseStyleTrack, baseStyleThumb, baseStyle2, sizes2, switchTheme;
 var init_chunk_XRIBTYHG = __esm({
   "../../node_modules/@chakra-ui/theme/dist/chunk-XRIBTYHG.mjs"() {
     init_dist4();
@@ -15696,7 +15415,7 @@ var init_chunk_XRIBTYHG = __esm({
       track: baseStyleTrack(props),
       thumb: baseStyleThumb
     }));
-    sizes3 = {
+    sizes2 = {
       sm: definePartsStyle2({
         container: {
           [$width.variable]: "1.375rem",
@@ -15718,7 +15437,7 @@ var init_chunk_XRIBTYHG = __esm({
     };
     switchTheme = defineMultiStyleConfig2({
       baseStyle: baseStyle2,
-      sizes: sizes3,
+      sizes: sizes2,
       defaultProps: {
         size: "md",
         colorScheme: "blue"
@@ -15726,7 +15445,7 @@ var init_chunk_XRIBTYHG = __esm({
     });
   }
 });
-var defineMultiStyleConfig3, definePartsStyle3, baseStyle3, numericStyles, variantSimple, variantStripe, variants, sizes4, tableTheme;
+var defineMultiStyleConfig3, definePartsStyle3, baseStyle3, numericStyles, variantSimple, variantStripe, variants, sizes3, tableTheme;
 var init_chunk_FI633VWD = __esm({
   "../../node_modules/@chakra-ui/theme/dist/chunk-FI633VWD.mjs"() {
     init_dist4();
@@ -15830,7 +15549,7 @@ var init_chunk_FI633VWD = __esm({
       striped: variantStripe,
       unstyled: defineStyle({})
     };
-    sizes4 = {
+    sizes3 = {
       sm: definePartsStyle3({
         th: {
           px: "4",
@@ -15890,7 +15609,7 @@ var init_chunk_FI633VWD = __esm({
     tableTheme = defineMultiStyleConfig3({
       baseStyle: baseStyle3,
       variants,
-      sizes: sizes4,
+      sizes: sizes3,
       defaultProps: {
         variant: "simple",
         size: "md",
@@ -15899,7 +15618,7 @@ var init_chunk_FI633VWD = __esm({
     });
   }
 });
-var $fg, $bg2, $border, defineMultiStyleConfig4, definePartsStyle4, baseStyleRoot, baseStyleTab, baseStyleTablist, baseStyleTabpanel, baseStyle4, sizes5, variantLine, variantEnclosed, variantEnclosedColored, variantSoftRounded, variantSolidRounded, variantUnstyled, variants2, tabsTheme;
+var $fg, $bg2, $border, defineMultiStyleConfig4, definePartsStyle4, baseStyleRoot, baseStyleTab, baseStyleTablist, baseStyleTabpanel, baseStyle4, sizes4, variantLine, variantEnclosed, variantEnclosedColored, variantSoftRounded, variantSolidRounded, variantUnstyled, variants2, tabsTheme;
 var init_chunk_T6EHV47V = __esm({
   "../../node_modules/@chakra-ui/theme/dist/chunk-T6EHV47V.mjs"() {
     init_dist4();
@@ -15951,7 +15670,7 @@ var init_chunk_T6EHV47V = __esm({
       tablist: baseStyleTablist(props),
       tabpanel: baseStyleTabpanel
     }));
-    sizes5 = {
+    sizes4 = {
       sm: definePartsStyle4({
         tab: {
           py: 1,
@@ -16120,7 +15839,7 @@ var init_chunk_T6EHV47V = __esm({
     };
     tabsTheme = defineMultiStyleConfig4({
       baseStyle: baseStyle4,
-      sizes: sizes5,
+      sizes: sizes4,
       variants: variants2,
       defaultProps: {
         size: "md",
@@ -16197,7 +15916,7 @@ var init_chunk_4FUZMKSO = __esm({
 });
 
 // ../../node_modules/@chakra-ui/theme/dist/chunk-VM3745AK.mjs
-var defineMultiStyleConfig5, definePartsStyle5, $bg3, $color, $shadow, $minH, $minW, $fontSize, $paddingX, baseStyleContainer, baseStyleLabel, baseStyleCloseButton, baseStyle6, sizes6, variants4, tagTheme;
+var defineMultiStyleConfig5, definePartsStyle5, $bg3, $color, $shadow, $minH, $minW, $fontSize, $paddingX, baseStyleContainer, baseStyleLabel, baseStyleCloseButton, baseStyle6, sizes5, variants4, tagTheme;
 var init_chunk_VM3745AK = __esm({
   "../../node_modules/@chakra-ui/theme/dist/chunk-VM3745AK.mjs"() {
     init_chunk_4FUZMKSO();
@@ -16263,7 +15982,7 @@ var init_chunk_VM3745AK = __esm({
       label: baseStyleLabel,
       closeButton: baseStyleCloseButton
     });
-    sizes6 = {
+    sizes5 = {
       sm: definePartsStyle5({
         container: {
           [$minH.variable]: "sizes.5",
@@ -16316,7 +16035,7 @@ var init_chunk_VM3745AK = __esm({
     tagTheme = defineMultiStyleConfig5({
       variants: variants4,
       baseStyle: baseStyle6,
-      sizes: sizes6,
+      sizes: sizes5,
       defaultProps: {
         size: "md",
         variant: "subtle",
@@ -16332,7 +16051,7 @@ function getDefaults(props) {
     errorBorderColor: ec || themeTools.mode("red.500", "red.300")(props)
   };
 }
-var definePartsStyle6, defineMultiStyleConfig6, $height2, $fontSize2, $padding, $borderRadius, baseStyle7, size, sizes7, variantOutline2, variantFilled, variantFlushed, variantUnstyled2, variants5, inputTheme;
+var definePartsStyle6, defineMultiStyleConfig6, $height2, $fontSize2, $padding, $borderRadius, baseStyle7, size, sizes6, variantOutline2, variantFilled, variantFlushed, variantUnstyled2, variants5, inputTheme;
 var init_chunk_FIZIJHUN = __esm({
   "../../node_modules/@chakra-ui/theme/dist/chunk-FIZIJHUN.mjs"() {
     init_dist4();
@@ -16393,7 +16112,7 @@ var init_chunk_FIZIJHUN = __esm({
         [$height2.variable]: "sizes.6"
       })
     };
-    sizes7 = {
+    sizes6 = {
       lg: definePartsStyle6({
         field: size.lg,
         group: size.lg
@@ -16525,7 +16244,7 @@ var init_chunk_FIZIJHUN = __esm({
     };
     inputTheme = defineMultiStyleConfig6({
       baseStyle: baseStyle7,
-      sizes: sizes7,
+      sizes: sizes6,
       variants: variants5,
       defaultProps: {
         size: "md",
@@ -16536,7 +16255,7 @@ var init_chunk_FIZIJHUN = __esm({
 });
 
 // ../../node_modules/@chakra-ui/theme/dist/chunk-TN6RO673.mjs
-var _a, baseStyle8, _a2, _b, variants6, _a3, _b2, _c, _d, _e, _f, _g, _h, sizes8, textareaTheme;
+var _a, baseStyle8, _a2, _b, variants6, _a3, _b2, _c, _d, _e, _f, _g, _h, sizes7, textareaTheme;
 var init_chunk_TN6RO673 = __esm({
   "../../node_modules/@chakra-ui/theme/dist/chunk-TN6RO673.mjs"() {
     init_chunk_FIZIJHUN();
@@ -16569,7 +16288,7 @@ var init_chunk_TN6RO673 = __esm({
       ),
       unstyled: (_b = (_a2 = inputTheme.variants) == null ? void 0 : _a2.unstyled.field) != null ? _b : {}
     };
-    sizes8 = {
+    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 : {},
@@ -16577,7 +16296,7 @@ var init_chunk_TN6RO673 = __esm({
     };
     textareaTheme = defineStyleConfig({
       baseStyle: baseStyle8,
-      sizes: sizes8,
+      sizes: sizes7,
       variants: variants6,
       defaultProps: {
         size: "md",
@@ -16617,7 +16336,7 @@ var init_chunk_J54NBX2J = __esm({
     });
   }
 });
-var defineMultiStyleConfig7, definePartsStyle7, filledStyle, baseStyleLabel2, baseStyleTrack2, baseStyleFilledTrack, baseStyle10, sizes9, progressTheme;
+var defineMultiStyleConfig7, definePartsStyle7, filledStyle, baseStyleLabel2, baseStyleTrack2, baseStyleFilledTrack, baseStyle10, sizes8, progressTheme;
 var init_chunk_BA7PF5LB = __esm({
   "../../node_modules/@chakra-ui/theme/dist/chunk-BA7PF5LB.mjs"() {
     init_dist4();
@@ -16665,7 +16384,7 @@ var init_chunk_BA7PF5LB = __esm({
       filledTrack: baseStyleFilledTrack(props),
       track: baseStyleTrack2(props)
     }));
-    sizes9 = {
+    sizes8 = {
       xs: definePartsStyle7({
         track: { h: "1" }
       }),
@@ -16680,7 +16399,7 @@ var init_chunk_BA7PF5LB = __esm({
       })
     };
     progressTheme = defineMultiStyleConfig7({
-      sizes: sizes9,
+      sizes: sizes8,
       baseStyle: baseStyle10,
       defaultProps: {
         size: "md",
@@ -16701,7 +16420,7 @@ var init_chunk_RQ25AHBB = __esm({
     isFunction = (value) => typeof value === "function";
   }
 });
-var definePartsStyle8, defineMultiStyleConfig8, $size2, baseStyleControl, baseStyleContainer2, baseStyleLabel3, baseStyleIcon, baseStyle11, sizes10, checkboxTheme;
+var definePartsStyle8, defineMultiStyleConfig8, $size2, baseStyleControl, baseStyleContainer2, baseStyleLabel3, baseStyleIcon, baseStyle11, sizes9, checkboxTheme;
 var init_chunk_Y7UXPTSV = __esm({
   "../../node_modules/@chakra-ui/theme/dist/chunk-Y7UXPTSV.mjs"() {
     init_chunk_RQ25AHBB();
@@ -16768,7 +16487,7 @@ var init_chunk_Y7UXPTSV = __esm({
       control: runIfFn(baseStyleControl, props),
       label: baseStyleLabel3
     }));
-    sizes10 = {
+    sizes9 = {
       sm: definePartsStyle8({
         control: { [$size2.variable]: "sizes.3" },
         label: { fontSize: "sm" },
@@ -16787,7 +16506,7 @@ var init_chunk_Y7UXPTSV = __esm({
     };
     checkboxTheme = defineMultiStyleConfig8({
       baseStyle: baseStyle11,
-      sizes: sizes10,
+      sizes: sizes9,
       defaultProps: {
         size: "md",
         colorScheme: "blue"
@@ -16797,7 +16516,7 @@ var init_chunk_Y7UXPTSV = __esm({
 });
 
 // ../../node_modules/@chakra-ui/theme/dist/chunk-BJIKSU3K.mjs
-var defineMultiStyleConfig9, definePartsStyle9, baseStyleControl2, baseStyle12, sizes11, radioTheme;
+var defineMultiStyleConfig9, definePartsStyle9, baseStyleControl2, baseStyle12, sizes10, radioTheme;
 var init_chunk_BJIKSU3K = __esm({
   "../../node_modules/@chakra-ui/theme/dist/chunk-BJIKSU3K.mjs"() {
     init_chunk_Y7UXPTSV();
@@ -16833,7 +16552,7 @@ var init_chunk_BJIKSU3K = __esm({
         control: baseStyleControl2(props)
       };
     });
-    sizes11 = {
+    sizes10 = {
       md: definePartsStyle9({
         control: { w: "4", h: "4" },
         label: { fontSize: "md" }
@@ -16849,7 +16568,7 @@ var init_chunk_BJIKSU3K = __esm({
     };
     radioTheme = defineMultiStyleConfig9({
       baseStyle: baseStyle12,
-      sizes: sizes11,
+      sizes: sizes10,
       defaultProps: {
         size: "md",
         colorScheme: "blue"
@@ -16859,7 +16578,7 @@ var init_chunk_BJIKSU3K = __esm({
 });
 
 // ../../node_modules/@chakra-ui/theme/dist/chunk-ILLVD2I4.mjs
-var defineMultiStyleConfig10, definePartsStyle10, $bg5, _a4, baseStyleField, baseStyleIcon2, baseStyle13, iconSpacing, _a22, _b3, _c2, _d2, _e2, _f2, _g2, _h2, sizes12, selectTheme;
+var defineMultiStyleConfig10, definePartsStyle10, $bg5, _a4, baseStyleField, baseStyleIcon2, baseStyle13, iconSpacing, _a22, _b3, _c2, _d2, _e2, _f2, _g2, _h2, sizes11, selectTheme;
 var init_chunk_ILLVD2I4 = __esm({
   "../../node_modules/@chakra-ui/theme/dist/chunk-ILLVD2I4.mjs"() {
     init_chunk_FIZIJHUN();
@@ -16899,7 +16618,7 @@ var init_chunk_ILLVD2I4 = __esm({
     iconSpacing = defineStyle({
       paddingInlineEnd: "8"
     });
-    sizes12 = {
+    sizes11 = {
       lg: {
         ...(_a22 = inputTheme.sizes) == null ? void 0 : _a22.lg,
         field: {
@@ -16934,7 +16653,7 @@ var init_chunk_ILLVD2I4 = __esm({
     };
     selectTheme = defineMultiStyleConfig10({
       baseStyle: baseStyle13,
-      sizes: sizes12,
+      sizes: sizes11,
       variants: inputTheme.variants,
       defaultProps: inputTheme.defaultProps
     });
@@ -16993,7 +16712,7 @@ var init_chunk_URZN3QPP = __esm({
     });
   }
 });
-var defineMultiStyleConfig11, definePartsStyle11, $thumbSize, $trackSize, $bg7, baseStyleContainer3, baseStyleTrack3, baseStyleThumb2, baseStyleFilledTrack2, baseStyle16, sizeLg, sizeMd, sizeSm, sizes13, sliderTheme;
+var defineMultiStyleConfig11, definePartsStyle11, $thumbSize, $trackSize, $bg7, baseStyleContainer3, baseStyleTrack3, baseStyleThumb2, baseStyleFilledTrack2, baseStyle16, sizeLg, sizeMd, sizeSm, sizes12, sliderTheme;
 var init_chunk_PUPKOASV = __esm({
   "../../node_modules/@chakra-ui/theme/dist/chunk-PUPKOASV.mjs"() {
     init_dist4();
@@ -17123,14 +16842,14 @@ var init_chunk_PUPKOASV = __esm({
         [$trackSize.variable]: `sizes.0.5`
       }
     });
-    sizes13 = {
+    sizes12 = {
       lg: sizeLg,
       md: sizeMd,
       sm: sizeSm
     };
     sliderTheme = defineMultiStyleConfig11({
       baseStyle: baseStyle16,
-      sizes: sizes13,
+      sizes: sizes12,
       defaultProps: {
         size: "md",
         colorScheme: "blue"
@@ -17138,7 +16857,7 @@ var init_chunk_PUPKOASV = __esm({
     });
   }
 });
-var $size3, baseStyle17, sizes14, spinnerTheme;
+var $size3, baseStyle17, sizes13, spinnerTheme;
 var init_chunk_HOBQJOCR = __esm({
   "../../node_modules/@chakra-ui/theme/dist/chunk-HOBQJOCR.mjs"() {
     init_dist3();
@@ -17147,7 +16866,7 @@ var init_chunk_HOBQJOCR = __esm({
       width: [$size3.reference],
       height: [$size3.reference]
     });
-    sizes14 = {
+    sizes13 = {
       xs: defineStyle({
         [$size3.variable]: "sizes.3"
       }),
@@ -17166,7 +16885,7 @@ var init_chunk_HOBQJOCR = __esm({
     };
     spinnerTheme = defineStyleConfig({
       baseStyle: baseStyle17,
-      sizes: sizes14,
+      sizes: sizes13,
       defaultProps: {
         size: "md"
       }
@@ -17175,7 +16894,7 @@ var init_chunk_HOBQJOCR = __esm({
 });
 
 // ../../node_modules/@chakra-ui/theme/dist/chunk-66QM3UU6.mjs
-var defineMultiStyleConfig12, definePartsStyle12, baseStyleLabel4, baseStyleHelpText, baseStyleNumber, baseStyleIcon3, baseStyle18, sizes15, statTheme;
+var defineMultiStyleConfig12, definePartsStyle12, baseStyleLabel4, baseStyleHelpText, baseStyleNumber, baseStyleIcon3, baseStyle18, sizes14, statTheme;
 var init_chunk_66QM3UU6 = __esm({
   "../../node_modules/@chakra-ui/theme/dist/chunk-66QM3UU6.mjs"() {
     init_dist4();
@@ -17205,7 +16924,7 @@ var init_chunk_66QM3UU6 = __esm({
       number: baseStyleNumber,
       icon: baseStyleIcon3
     });
-    sizes15 = {
+    sizes14 = {
       md: definePartsStyle12({
         label: { fontSize: "sm" },
         helpText: { fontSize: "sm" },
@@ -17214,7 +16933,7 @@ var init_chunk_66QM3UU6 = __esm({
     };
     statTheme = defineMultiStyleConfig12({
       baseStyle: baseStyle18,
-      sizes: sizes15,
+      sizes: sizes14,
       defaultProps: {
         size: "md"
       }
@@ -17408,7 +17127,7 @@ function getSize(value) {
     dialog: { maxW: value }
   });
 }
-var defineMultiStyleConfig15, definePartsStyle15, $bg10, $shadow3, baseStyleOverlay, baseStyleDialogContainer, baseStyleDialog, baseStyleHeader, baseStyleCloseButton2, baseStyleBody, baseStyleFooter, baseStyle23, sizes16, modalTheme;
+var defineMultiStyleConfig15, definePartsStyle15, $bg10, $shadow3, baseStyleOverlay, baseStyleDialogContainer, baseStyleDialog, baseStyleHeader, baseStyleCloseButton2, baseStyleBody, baseStyleFooter, baseStyle23, sizes15, modalTheme;
 var init_chunk_JIVTZ35T = __esm({
   "../../node_modules/@chakra-ui/theme/dist/chunk-JIVTZ35T.mjs"() {
     init_chunk_RQ25AHBB();
@@ -17484,7 +17203,7 @@ var init_chunk_JIVTZ35T = __esm({
       body: runIfFn(baseStyleBody, props),
       footer: baseStyleFooter
     }));
-    sizes16 = {
+    sizes15 = {
       xs: getSize("xs"),
       sm: getSize("sm"),
       md: getSize("md"),
@@ -17499,7 +17218,7 @@ var init_chunk_JIVTZ35T = __esm({
     };
     modalTheme = defineMultiStyleConfig15({
       baseStyle: baseStyle23,
-      sizes: sizes16,
+      sizes: sizes15,
       defaultProps: { size: "md" }
     });
   }
@@ -17534,7 +17253,7 @@ function getSize2(size2) {
     }
   });
 }
-var defineMultiStyleConfig16, definePartsStyle16, $stepperWidth, $inputPadding, inputPaddingValue, $bg11, $fg3, $border2, baseStyleRoot2, baseStyleField2, baseStyleStepperGroup, baseStyleStepper, baseStyle24, sizes17, numberInputTheme;
+var defineMultiStyleConfig16, definePartsStyle16, $stepperWidth, $inputPadding, inputPaddingValue, $bg11, $fg3, $border2, baseStyleRoot2, baseStyleField2, baseStyleStepperGroup, baseStyleStepper, baseStyle24, sizes16, numberInputTheme;
 var init_chunk_VEZNC4IQ = __esm({
   "../../node_modules/@chakra-ui/theme/dist/chunk-VEZNC4IQ.mjs"() {
     init_chunk_VW4MZLZF();
@@ -17593,7 +17312,7 @@ var init_chunk_VEZNC4IQ = __esm({
         stepper: baseStyleStepper
       };
     });
-    sizes17 = {
+    sizes16 = {
       xs: getSize2("xs"),
       sm: getSize2("sm"),
       md: getSize2("md"),
@@ -17601,7 +17320,7 @@ var init_chunk_VEZNC4IQ = __esm({
     };
     numberInputTheme = defineMultiStyleConfig16({
       baseStyle: baseStyle24,
-      sizes: sizes17,
+      sizes: sizes16,
       variants: inputTheme.variants,
       defaultProps: inputTheme.defaultProps
     });
@@ -17609,7 +17328,7 @@ var init_chunk_VEZNC4IQ = __esm({
 });
 
 // ../../node_modules/@chakra-ui/theme/dist/chunk-HFED6QOE.mjs
-var _a5, baseStyle25, sizes18, _a23, _b4, variants7, pinInputTheme;
+var _a5, baseStyle25, sizes17, _a23, _b4, variants7, pinInputTheme;
 var init_chunk_HFED6QOE = __esm({
   "../../node_modules/@chakra-ui/theme/dist/chunk-HFED6QOE.mjs"() {
     init_chunk_FIZIJHUN();
@@ -17619,7 +17338,7 @@ var init_chunk_HFED6QOE = __esm({
       ...(_a5 = inputTheme.baseStyle) == null ? void 0 : _a5.field,
       textAlign: "center"
     });
-    sizes18 = {
+    sizes17 = {
       lg: defineStyle({
         fontSize: "lg",
         w: 12,
@@ -17668,7 +17387,7 @@ var init_chunk_HFED6QOE = __esm({
     };
     pinInputTheme = defineStyleConfig({
       baseStyle: baseStyle25,
-      sizes: sizes18,
+      sizes: sizes17,
       variants: variants7,
       defaultProps: inputTheme.defaultProps
     });
@@ -17750,7 +17469,7 @@ function getSize3(value) {
     dialog: { maxW: value }
   });
 }
-var definePartsStyle18, defineMultiStyleConfig18, $bg12, $bs, baseStyleOverlay2, baseStyleDialogContainer2, baseStyleDialog2, baseStyleHeader3, baseStyleCloseButton4, baseStyleBody3, baseStyleFooter3, baseStyle27, sizes19, drawerTheme;
+var definePartsStyle18, defineMultiStyleConfig18, $bg12, $bs, baseStyleOverlay2, baseStyleDialogContainer2, baseStyleDialog2, baseStyleHeader3, baseStyleCloseButton4, baseStyleBody3, baseStyleFooter3, baseStyle27, sizes18, drawerTheme;
 var init_chunk_5FAATIOO = __esm({
   "../../node_modules/@chakra-ui/theme/dist/chunk-5FAATIOO.mjs"() {
     init_chunk_RQ25AHBB();
@@ -17815,7 +17534,7 @@ var init_chunk_5FAATIOO = __esm({
       body: baseStyleBody3,
       footer: baseStyleFooter3
     }));
-    sizes19 = {
+    sizes18 = {
       xs: getSize3("xs"),
       sm: getSize3("md"),
       md: getSize3("lg"),
@@ -17825,7 +17544,7 @@ var init_chunk_5FAATIOO = __esm({
     };
     drawerTheme = defineMultiStyleConfig18({
       baseStyle: baseStyle27,
-      sizes: sizes19,
+      sizes: sizes18,
       defaultProps: {
         size: "xs"
       }
@@ -17975,7 +17694,7 @@ var init_chunk_2RLCRBJQ = __esm({
 });
 
 // ../../node_modules/@chakra-ui/theme/dist/chunk-SZS2B4EE.mjs
-var baseStyle32, sizes20, headingTheme;
+var baseStyle32, sizes19, headingTheme;
 var init_chunk_SZS2B4EE = __esm({
   "../../node_modules/@chakra-ui/theme/dist/chunk-SZS2B4EE.mjs"() {
     init_dist3();
@@ -17983,7 +17702,7 @@ var init_chunk_SZS2B4EE = __esm({
       fontFamily: "heading",
       fontWeight: "bold"
     });
-    sizes20 = {
+    sizes19 = {
       "4xl": defineStyle({
         fontSize: ["6xl", null, "7xl"],
         lineHeight: 1
@@ -18019,7 +17738,7 @@ var init_chunk_SZS2B4EE = __esm({
     };
     headingTheme = defineStyleConfig({
       baseStyle: baseStyle32,
-      sizes: sizes20,
+      sizes: sizes19,
       defaultProps: {
         size: "xl"
       }
@@ -18061,7 +17780,7 @@ var init_chunk_CHG7JP5U = __esm({
     });
   }
 });
-var baseStyle34, variantGhost, variantOutline3, accessibleColorMap, variantSolid2, variantLink, variantUnstyled3, variants8, sizes21, buttonTheme;
+var baseStyle34, variantGhost, variantOutline3, accessibleColorMap, variantSolid2, variantLink, variantUnstyled3, variants8, sizes20, buttonTheme;
 var init_chunk_MMPN6JKT = __esm({
   "../../node_modules/@chakra-ui/theme/dist/chunk-MMPN6JKT.mjs"() {
     init_chunk_RQ25AHBB();
@@ -18205,7 +17924,7 @@ var init_chunk_MMPN6JKT = __esm({
       link: variantLink,
       unstyled: variantUnstyled3
     };
-    sizes21 = {
+    sizes20 = {
       lg: defineStyle({
         h: "12",
         minW: "12",
@@ -18234,7 +17953,7 @@ var init_chunk_MMPN6JKT = __esm({
     buttonTheme = defineStyleConfig({
       baseStyle: baseStyle34,
       variants: variants8,
-      sizes: sizes21,
+      sizes: sizes20,
       defaultProps: {
         variant: "solid",
         size: "md",
@@ -18245,7 +17964,7 @@ var init_chunk_MMPN6JKT = __esm({
 });
 
 // ../../node_modules/@chakra-ui/theme/dist/chunk-N5CTW2M4.mjs
-var definePartsStyle23, defineMultiStyleConfig23, $bg13, $padding2, $shadow4, $radius, $border3, $borderColor, baseStyle35, sizes22, variants9, cardTheme;
+var definePartsStyle23, defineMultiStyleConfig23, $bg13, $padding2, $shadow4, $radius, $border3, $borderColor, baseStyle35, sizes21, variants9, cardTheme;
 var init_chunk_N5CTW2M4 = __esm({
   "../../node_modules/@chakra-ui/theme/dist/chunk-N5CTW2M4.mjs"() {
     init_dist4();
@@ -18278,7 +17997,7 @@ var init_chunk_N5CTW2M4 = __esm({
         padding: $padding2.reference
       }
     });
-    sizes22 = {
+    sizes21 = {
       sm: definePartsStyle23({
         container: {
           [$radius.variable]: "radii.base",
@@ -18333,7 +18052,7 @@ var init_chunk_N5CTW2M4 = __esm({
     cardTheme = defineMultiStyleConfig23({
       baseStyle: baseStyle35,
       variants: variants9,
-      sizes: sizes22,
+      sizes: sizes21,
       defaultProps: {
         variant: "elevated",
         size: "md"
@@ -18341,7 +18060,7 @@ var init_chunk_N5CTW2M4 = __esm({
     });
   }
 });
-var $size4, $bg14, baseStyle36, sizes23, closeButtonTheme;
+var $size4, $bg14, baseStyle36, sizes22, closeButtonTheme;
 var init_chunk_FC2RT2FC = __esm({
   "../../node_modules/@chakra-ui/theme/dist/chunk-FC2RT2FC.mjs"() {
     init_dist3();
@@ -18375,7 +18094,7 @@ var init_chunk_FC2RT2FC = __esm({
       },
       bg: $bg14.reference
     });
-    sizes23 = {
+    sizes22 = {
       lg: defineStyle({
         [$size4.variable]: "sizes.10",
         fontSize: "md"
@@ -18391,7 +18110,7 @@ var init_chunk_FC2RT2FC = __esm({
     };
     closeButtonTheme = defineStyleConfig({
       baseStyle: baseStyle36,
-      sizes: sizes23,
+      sizes: sizes22,
       defaultProps: {
         size: "md"
       }
@@ -18653,7 +18372,7 @@ function getSize4(size2) {
     }
   });
 }
-var definePartsStyle26, defineMultiStyleConfig26, $border4, $bg16, $fs, $size5, baseStyleBadge, baseStyleExcessLabel, baseStyleContainer5, baseStyleLabel5, baseStyle42, sizes24, avatarTheme;
+var definePartsStyle26, defineMultiStyleConfig26, $border4, $bg16, $fs, $size5, baseStyleBadge, baseStyleExcessLabel, baseStyleContainer5, baseStyleLabel5, baseStyle42, sizes23, avatarTheme;
 var init_chunk_EYWUA2TC = __esm({
   "../../node_modules/@chakra-ui/theme/dist/chunk-EYWUA2TC.mjs"() {
     init_chunk_QH74K4BV();
@@ -18719,7 +18438,7 @@ var init_chunk_EYWUA2TC = __esm({
       container: runIfFn(baseStyleContainer5, props),
       label: baseStyleLabel5
     }));
-    sizes24 = {
+    sizes23 = {
       "2xs": getSize4(4),
       xs: getSize4(6),
       sm: getSize4(8),
@@ -18731,7 +18450,7 @@ var init_chunk_EYWUA2TC = __esm({
     };
     avatarTheme = defineMultiStyleConfig26({
       baseStyle: baseStyle42,
-      sizes: sizes24,
+      sizes: sizes23,
       defaultProps: {
         size: "md"
       }
@@ -18831,82 +18550,368 @@ var init_chunk_BVEAU2MF = __esm({
     };
   }
 });
-
-// ../../node_modules/@chakra-ui/theme/dist/chunk-SKQLGI36.mjs
-var semanticTokens;
-var init_chunk_SKQLGI36 = __esm({
-  "../../node_modules/@chakra-ui/theme/dist/chunk-SKQLGI36.mjs"() {
-    "use client";
-    semanticTokens = {
-      colors: {
-        "chakra-body-text": { _light: "gray.800", _dark: "whiteAlpha.900" },
-        "chakra-body-bg": { _light: "white", _dark: "gray.800" },
-        "chakra-border-color": { _light: "gray.200", _dark: "whiteAlpha.300" },
-        "chakra-inverse-text": { _light: "white", _dark: "gray.800" },
-        "chakra-subtle-bg": { _light: "gray.100", _dark: "gray.700" },
-        "chakra-subtle-text": { _light: "gray.600", _dark: "gray.400" },
-        "chakra-placeholder-color": { _light: "gray.500", _dark: "whiteAlpha.400" }
-      }
+
+// ../../node_modules/@chakra-ui/theme/dist/chunk-SKQLGI36.mjs
+var semanticTokens;
+var init_chunk_SKQLGI36 = __esm({
+  "../../node_modules/@chakra-ui/theme/dist/chunk-SKQLGI36.mjs"() {
+    "use client";
+    semanticTokens = {
+      colors: {
+        "chakra-body-text": { _light: "gray.800", _dark: "whiteAlpha.900" },
+        "chakra-body-bg": { _light: "white", _dark: "gray.800" },
+        "chakra-border-color": { _light: "gray.200", _dark: "whiteAlpha.300" },
+        "chakra-inverse-text": { _light: "white", _dark: "gray.800" },
+        "chakra-subtle-bg": { _light: "gray.100", _dark: "gray.700" },
+        "chakra-subtle-text": { _light: "gray.600", _dark: "gray.400" },
+        "chakra-placeholder-color": { _light: "gray.500", _dark: "whiteAlpha.400" }
+      }
+    };
+  }
+});
+
+// ../../node_modules/@chakra-ui/theme/dist/chunk-RID7N3YQ.mjs
+var styles;
+var init_chunk_RID7N3YQ = __esm({
+  "../../node_modules/@chakra-ui/theme/dist/chunk-RID7N3YQ.mjs"() {
+    "use client";
+    styles = {
+      global: {
+        body: {
+          fontFamily: "body",
+          color: "chakra-body-text",
+          bg: "chakra-body-bg",
+          transitionProperty: "background-color",
+          transitionDuration: "normal",
+          lineHeight: "base"
+        },
+        "*::placeholder": {
+          color: "chakra-placeholder-color"
+        },
+        "*, *::before, &::after": {
+          borderColor: "chakra-border-color"
+        }
+      }
+    };
+  }
+});
+
+// ../../node_modules/@chakra-ui/theme/dist/index.mjs
+var direction, config, theme2;
+var init_dist5 = __esm({
+  "../../node_modules/@chakra-ui/theme/dist/index.mjs"() {
+    init_chunk_5FMCT5RQ();
+    init_chunk_BVEAU2MF();
+    init_chunk_SKQLGI36();
+    init_chunk_RID7N3YQ();
+    direction = "ltr";
+    config = {
+      useSystemColorMode: false,
+      initialColorMode: "light",
+      cssVarPrefix: "chakra"
+    };
+    theme2 = {
+      semanticTokens,
+      direction,
+      ...foundations,
+      components,
+      styles,
+      config
+    };
+    ({
+      semanticTokens,
+      direction,
+      components: {},
+      ...foundations,
+      styles,
+      config
+    });
+  }
+});
+var borders2;
+var init_borders = __esm({
+  "src/theme/foundations/borders.ts"() {
+    borders2 = {
+      none: "0",
+      sm: `${tokens10__namespace.default.size.stroke.sm} solid`,
+      "sm-dashed": `${tokens10__namespace.default.size.stroke.sm} dashed`,
+      md: `${tokens10__namespace.default.size.stroke.md} solid`,
+      "md-dashed": `${tokens10__namespace.default.size.stroke.md} dashed`,
+      lg: `${tokens10__namespace.default.size.stroke.lg} solid`,
+      "lg-dashed": `${tokens10__namespace.default.size.stroke.lg} dashed`
+    };
+  }
+});
+var breakpoints2;
+var init_breakpoints = __esm({
+  "src/theme/foundations/breakpoints.ts"() {
+    breakpoints2 = {
+      sm: tokens10__namespace.default.size.breakpoint.sm,
+      md: tokens10__namespace.default.size.breakpoint.md,
+      lg: tokens10__namespace.default.size.breakpoint.lg,
+      xl: tokens10__namespace.default.size.breakpoint.lg,
+      "2xl": tokens10__namespace.default.size.breakpoint.lg
+    };
+  }
+});
+
+// src/theme/foundations/config.ts
+var config2;
+var init_config = __esm({
+  "src/theme/foundations/config.ts"() {
+    config2 = {
+      cssVarPrefix: "spor",
+      initialColorMode: "light",
+      useSystemColorMode: false
+    };
+  }
+});
+var fonts;
+var init_fonts = __esm({
+  "src/theme/foundations/fonts.ts"() {
+    fonts = {
+      body: tokens10__namespace.default.font.family.body,
+      heading: tokens10__namespace.default.font.family.heading,
+      mono: tokens10__namespace.default.font.family.monospace
+    };
+  }
+});
+var fontSizes;
+var init_fontSizes = __esm({
+  "src/theme/foundations/fontSizes.ts"() {
+    fontSizes = {
+      "2xs": tokens10__namespace.default.size.font.xs.mobile,
+      xs: tokens10__namespace.default.size.font.sm.mobile,
+      sm: tokens10__namespace.default.size.font.md.mobile,
+      md: tokens10__namespace.default.size.font.lg.mobile,
+      lg: tokens10__namespace.default.size.font.xl.mobile,
+      xl: tokens10__namespace.default.size.font.xxl.mobile,
+      "2xl": tokens10__namespace.default.size.font.xl.desktop,
+      "3xl": tokens10__namespace.default.size.font.xxl.desktop,
+      mobile: {
+        xs: tokens10__namespace.default.size.font.xs.mobile,
+        sm: tokens10__namespace.default.size.font.sm.mobile,
+        md: tokens10__namespace.default.size.font.md.mobile,
+        lg: tokens10__namespace.default.size.font.lg.mobile,
+        xl: tokens10__namespace.default.size.font.xl.mobile,
+        xxl: tokens10__namespace.default.size.font.xxl.mobile
+      },
+      desktop: {
+        xs: tokens10__namespace.default.size.font.xs.desktop,
+        sm: tokens10__namespace.default.size.font.sm.desktop,
+        md: tokens10__namespace.default.size.font.md.desktop,
+        lg: tokens10__namespace.default.size.font.lg.desktop,
+        xl: tokens10__namespace.default.size.font.xl.desktop,
+        xxl: tokens10__namespace.default.size.font.xxl.desktop
+      }
+    };
+  }
+});
+
+// src/theme/foundations/fontWeights.ts
+var fontWeights;
+var init_fontWeights = __esm({
+  "src/theme/foundations/fontWeights.ts"() {
+    fontWeights = {
+      light: 300,
+      medium: 400,
+      bold: 700
+    };
+  }
+});
+var lineHeights;
+var init_lineHeights = __esm({
+  "src/theme/foundations/lineHeights.ts"() {
+    lineHeights = {
+      normal: tokens10__namespace.default.font.style.lg["line-height"]
     };
   }
 });
-
-// ../../node_modules/@chakra-ui/theme/dist/chunk-RID7N3YQ.mjs
-var styles;
-var init_chunk_RID7N3YQ = __esm({
-  "../../node_modules/@chakra-ui/theme/dist/chunk-RID7N3YQ.mjs"() {
-    "use client";
-    styles = {
-      global: {
-        body: {
-          fontFamily: "body",
-          color: "chakra-body-text",
-          bg: "chakra-body-bg",
-          transitionProperty: "background-color",
-          transitionDuration: "normal",
-          lineHeight: "base"
-        },
-        "*::placeholder": {
-          color: "chakra-placeholder-color"
-        },
-        "*, *::before, &::after": {
-          borderColor: "chakra-border-color"
-        }
-      }
+var radii2;
+var init_radii = __esm({
+  "src/theme/foundations/radii.ts"() {
+    radii2 = {
+      none: tokens10__namespace.default.size["border-radius"].none,
+      xs: tokens10__namespace.default.size["border-radius"].xs,
+      sm: tokens10__namespace.default.size["border-radius"].sm,
+      md: tokens10__namespace.default.size["border-radius"].md,
+      lg: tokens10__namespace.default.size["border-radius"].lg,
+      xl: tokens10__namespace.default.size["border-radius"].xl,
+      "2xl": tokens10__namespace.default.size["border-radius"]["2xl"],
+      round: "50%"
     };
   }
 });
+var spacing2, space2;
+var init_spacing = __esm({
+  "src/theme/foundations/spacing.ts"() {
+    spacing2 = Object.entries(tokens10__namespace.default.size.spacing).reduce(
+      (tokens14, [key, token]) => ({
+        ...tokens14,
+        [Number(key)]: token
+      }),
+      {}
+    );
+    space2 = spacing2;
+  }
+});
 
-// ../../node_modules/@chakra-ui/theme/dist/index.mjs
-var direction, config2, theme2;
-var init_dist5 = __esm({
-  "../../node_modules/@chakra-ui/theme/dist/index.mjs"() {
-    init_chunk_5FMCT5RQ();
-    init_chunk_BVEAU2MF();
-    init_chunk_SKQLGI36();
-    init_chunk_RID7N3YQ();
-    direction = "ltr";
-    config2 = {
-      useSystemColorMode: false,
-      initialColorMode: "light",
-      cssVarPrefix: "chakra"
+// src/theme/foundations/sizes.ts
+var largeSizes2, container2, sizes24;
+var init_sizes = __esm({
+  "src/theme/foundations/sizes.ts"() {
+    init_spacing();
+    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"
     };
-    theme2 = {
-      semanticTokens,
-      direction,
-      ...foundations,
-      components,
-      styles,
-      config: config2
+    container2 = {
+      sm: "640px",
+      md: "768px",
+      lg: "1024px",
+      xl: "1280px"
     };
-    ({
-      semanticTokens,
-      direction,
-      components: {},
-      ...foundations,
-      styles,
-      config: config2
-    });
+    sizes24 = {
+      ...spacing2,
+      ...largeSizes2,
+      container: container2
+    };
+  }
+});
+var textStyles;
+var init_textStyles = __esm({
+  "src/theme/foundations/textStyles.ts"() {
+    textStyles = {
+      "2xl": {
+        fontSize: [
+          tokens10__namespace.default.font.style.xxl["font-size"].mobile,
+          tokens10__namespace.default.font.style.xxl["font-size"].desktop
+        ],
+        fontFamily: tokens10__namespace.default.font.style.xxl["font-family"],
+        lineHeight: tokens10__namespace.default.font.style.xxl["line-height"]
+      },
+      "xl-display": {
+        fontSize: [
+          tokens10__namespace.default.font.style["xl-display"]["font-size"].mobile,
+          tokens10__namespace.default.font.style["xl-display"]["font-size"].desktop
+        ],
+        fontFamily: tokens10__namespace.default.font.style["xl-display"]["font-family"],
+        lineHeight: tokens10__namespace.default.font.style["xl-display"]["line-height"]
+      },
+      "xl-sans": {
+        fontSize: [
+          tokens10__namespace.default.font.style["xl-sans"]["font-size"].mobile,
+          tokens10__namespace.default.font.style["xl-sans"]["font-size"].desktop
+        ],
+        fontFamily: tokens10__namespace.default.font.style["xl-sans"]["font-family"],
+        lineHeight: tokens10__namespace.default.font.style["xl-sans"]["line-height"]
+      },
+      lg: {
+        fontSize: [
+          tokens10__namespace.default.font.style.lg["font-size"].mobile,
+          tokens10__namespace.default.font.style.lg["font-size"].desktop
+        ],
+        fontFamily: tokens10__namespace.default.font.style.lg["font-family"],
+        lineHeight: tokens10__namespace.default.font.style.lg["line-height"]
+      },
+      md: {
+        fontSize: [
+          tokens10__namespace.default.font.style.md["font-size"].mobile,
+          tokens10__namespace.default.font.style.md["font-size"].desktop
+        ],
+        fontFamily: tokens10__namespace.default.font.style.md["font-family"],
+        lineHeight: tokens10__namespace.default.font.style.md["line-height"]
+      },
+      sm: {
+        fontSize: [
+          tokens10__namespace.default.font.style.sm["font-size"].mobile,
+          tokens10__namespace.default.font.style.sm["font-size"].desktop
+        ],
+        fontFamily: tokens10__namespace.default.font.style.sm["font-family"],
+        lineHeight: tokens10__namespace.default.font.style.sm["line-height"]
+      },
+      xs: {
+        fontSize: [
+          tokens10__namespace.default.font.style.xs["font-size"].mobile,
+          tokens10__namespace.default.font.style.xs["font-size"].desktop
+        ],
+        fontFamily: tokens10__namespace.default.font.style.xs["font-family"],
+        lineHeight: tokens10__namespace.default.font.style.xs["line-height"]
+      }
+    };
+  }
+});
+var zIndices2;
+var init_zIndices = __esm({
+  "src/theme/foundations/zIndices.ts"() {
+    zIndices2 = {
+      hide: tokens10__namespace.default.depth["z-index"].hide,
+      auto: "auto",
+      base: tokens10__namespace.default.depth["z-index"].base,
+      docked: tokens10__namespace.default.depth["z-index"].docked,
+      dropdown: tokens10__namespace.default.depth["z-index"].dropdown,
+      sticky: tokens10__namespace.default.depth["z-index"].sticky,
+      banner: tokens10__namespace.default.depth["z-index"].banner,
+      overlay: tokens10__namespace.default.depth["z-index"].overlay,
+      modal: tokens10__namespace.default.depth["z-index"].modal,
+      popover: tokens10__namespace.default.depth["z-index"].popover,
+      skipLink: tokens10__namespace.default.depth["z-index"].skipLink,
+      toast: tokens10__namespace.default.depth["z-index"].toast,
+      tooltip: tokens10__namespace.default.depth["z-index"].tooltip
+    };
+  }
+});
+
+// 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 init_foundations = __esm({
+  "src/theme/foundations/index.ts"() {
+    init_borders();
+    init_breakpoints();
+    init_colors();
+    init_config();
+    init_fonts();
+    init_fontSizes();
+    init_fontWeights();
+    init_lineHeights();
+    init_radii();
+    init_shadows();
+    init_sizes();
+    init_spacing();
+    init_textStyles();
+    init_zIndices();
   }
 });
 
@@ -20026,7 +20031,7 @@ var init_datepicker2 = __esm({
               borderColor: themeTools.mode("darkGrey", "white")(props),
               borderWidth: 2
             }),
-            zIndex: zIndices.docked
+            zIndex: zIndices2.docked
           },
           _focusWithin: {
             boxShadow: getBoxShadowString({
@@ -20062,7 +20067,7 @@ var init_datepicker2 = __esm({
         },
         dateTimeSegment: {
           color: themeTools.mode(
-            props.isEditable ? "darkGrey" : "dimGrey",
+            "darkGrey",
             props.isPlaceholder ? "whiteAlpha.400" : "white"
           )(props)
         },
@@ -20184,7 +20189,14 @@ var init_datepicker2 = __esm({
             boxShadow: getBoxShadowString({
               borderWidth: 1,
               borderColor: themeTools.mode("osloGrey", "dimGrey")(props)
-            })
+            }),
+            _focus: {
+              outline: "none",
+              boxShadow: getBoxShadowString({
+                borderWidth: 2,
+                borderColor: themeTools.mode("greenHaze", "azure")(props)
+              })
+            }
           },
           "&[data-unavailable]": {
             pointerEvents: "none",
@@ -22849,7 +22861,7 @@ var init_theme = __esm({
     };
   }
 });
-var BaseToast, ToastIcon, getIcon3, texts22;
+var BaseToast, ToastIcon, getIcon3, texts23;
 var init_BaseToast = __esm({
   "src/toast/BaseToast.tsx"() {
     init_src();
@@ -22864,7 +22876,7 @@ var init_BaseToast = __esm({
         Icon,
         {
           flexShrink: 0,
-          "aria-label": t2(texts22[variant]),
+          "aria-label": t2(texts23[variant]),
           marginRight: 1,
           marginY: 1.5,
           color: "darkGrey"
@@ -22881,7 +22893,7 @@ var init_BaseToast = __esm({
           return sporIconReact.ErrorOutline24Icon;
       }
     };
-    texts22 = createTexts({
+    texts23 = createTexts({
       info: {
         nb: "Informasjon",
         nn: "Informasjon",
@@ -22919,7 +22931,7 @@ var init_ActionToast = __esm({
     };
   }
 });
-var ClosableToast, texts23;
+var ClosableToast, texts24;
 var init_ClosableToast = __esm({
   "src/toast/ClosableToast.tsx"() {
     init_src();
@@ -22937,13 +22949,13 @@ var init_ClosableToast = __esm({
         {
           sx: styles2.dismissButton,
           variant: "ghost",
-          "aria-label": t2(texts23.dismiss),
+          "aria-label": t2(texts24.dismiss),
           icon: /* @__PURE__ */ React49__namespace.default.createElement(sporIconReact.CloseFill18Icon, null),
           onClick: onClose
         }
       ));
     };
-    texts23 = createTexts({
+    texts24 = createTexts({
       dismiss: {
         nb: "Lukk",
         nn: "Lukk",
@@ -23344,7 +23356,6 @@ Object.defineProperty(exports, 'Time', {
   enumerable: true,
   get: function () { return date.Time; }
 });
-exports.tokens = tokens10__namespace;
 Object.defineProperty(exports, 'Item', {
   enumerable: true,
   get: function () { return reactStately.Item; }
@@ -23353,6 +23364,7 @@ Object.defineProperty(exports, 'Section', {
   enumerable: true,
   get: function () { return reactStately.Section; }
 });
+exports.tokens = tokens10__namespace;
 exports.Combobox = Combobox;
 exports.DateRangePicker = DateRangePicker;
 exports.DrawerHeader = exports.ModalHeader;