@vygruppen/spor-react 3.0.4 → 3.1.1

package/dist/{chunk-ETCK74GR.mjs → chunk-GIRK7GTN.mjs}

@@ -1,14 +1,14 @@
-import { forwardRef, Accordion as Accordion$1, Skeleton as Skeleton$1, useButtonGroup, Button as Button$1, Box, Center, ButtonGroup as ButtonGroup$1, IconButton as IconButton$1, Stack as Stack$1, useStyleConfig, Badge as Badge$1, Code as Code$1, Text, useMultiStyleConfig, FormLabel, Flex, useFormControlContext, useBreakpointValue, Popover, InputGroup, PopoverAnchor, Portal, PopoverContent, PopoverArrow, PopoverBody, chakra, Checkbox as Checkbox$1, useCheckbox, FormControl as FormControl$1, InputLeftElement, Input as Input$1, InputRightElement, Select, useDisclosure, useControllableState, Radio as Radio$1, RadioGroup as RadioGroup$1, Switch as Switch$1, Textarea as Textarea$1, Link, ModalHeader as ModalHeader$1, useModalContext, DrawerContent as DrawerContent$1, Tabs as Tabs$1, Table as Table$1, defineStyleConfig as defineStyleConfig$1, createMultiStyleConfigHelpers as createMultiStyleConfigHelpers$1, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, SkeletonCircle as SkeletonCircle$1, SkeletonText as SkeletonText$1, Heading as Heading$1, CheckboxGroup as CheckboxGroup$1, useOutsideClick, List, ListItem, useColorModeValue, useFormControlProps, useFormControl, Drawer as Drawer$1, DrawerOverlay, DrawerCloseButton, DrawerBody, usePopoverContext, DarkMode, PopoverTrigger, PopoverCloseButton, ChakraProvider, HStack, useToast as useToast$1, useInterval } from '@chakra-ui/react';
+import { forwardRef, Accordion as Accordion$1, Skeleton as Skeleton$1, useButtonGroup, Button as Button$1, Box, Center, ButtonGroup as ButtonGroup$1, IconButton as IconButton$1, Stack as Stack$1, useStyleConfig, Badge as Badge$1, Code as Code$1, Text, useMultiStyleConfig, FormLabel, Flex, useFormControlContext, useBreakpointValue, Popover, InputGroup, PopoverAnchor, Portal, PopoverContent, PopoverArrow, PopoverBody, chakra, Checkbox as Checkbox$1, useCheckbox, FormControl as FormControl$1, InputLeftElement, Input as Input$1, InputRightElement, Select, useDisclosure, useControllableState, Radio as Radio$1, RadioGroup as RadioGroup$1, Switch as Switch$1, Textarea as Textarea$1, Link, ModalHeader as ModalHeader$1, useModalContext, DrawerContent as DrawerContent$1, Tabs as Tabs$1, Table as Table$1, defineStyleConfig as defineStyleConfig$1, createMultiStyleConfigHelpers as createMultiStyleConfigHelpers$1, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, SkeletonCircle as SkeletonCircle$1, SkeletonText as SkeletonText$1, Heading as Heading$1, CheckboxGroup as CheckboxGroup$1, List, ListItem, useColorModeValue, useFormControlProps, useFormControl, Drawer as Drawer$1, DrawerOverlay, DrawerCloseButton, DrawerBody, usePopoverContext, DarkMode, PopoverTrigger, PopoverCloseButton, ChakraProvider, HStack, useToast as useToast$1, useInterval } from '@chakra-ui/react';
 export { AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Box, Center, Collapse, Container, DarkMode, DrawerBody, DrawerCloseButton, DrawerFooter, DrawerOverlay, Fade, Flex, FormHelperText, Grid, GridItem, HStack, Image, Img, InputGroup, LightMode, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalOverlay, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, ScaleFade, SimpleGrid, Slide, SlideFade, Spacer, Tab, TabList, TabPanel, TabPanels, TableCaption, Tbody, Td, Tfoot, Th, Thead, Tr, VStack, Wrap, WrapItem, extendTheme, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToken } from '@chakra-ui/react';
 import tokens10__default from '@vygruppen/spor-design-tokens';
 import * as tokens10 from '@vygruppen/spor-design-tokens';
 export { tokens10 as tokens };
 import * as React49 from 'react';
 import React49__default, { createContext, forwardRef as forwardRef$1, useRef, useState, useEffect, useId, Suspense, useMemo, useContext, useCallback } from 'react';
-import { CloseFill30Icon, CloseFill24Icon, CloseFill18Icon, CalendarOutline24Icon, CloseOutline24Icon, SearchOutline24Icon, InformationFill24Icon, InformationFill18Icon, WarningFill24Icon, WarningFill18Icon, ErrorFill24Icon, ErrorFill18Icon, LinkOutOutline24Icon, DropdownLeftFill24Icon, DropdownRightFill24Icon, DropdownDownFill18Icon, DropdownDownFill24Icon, DropdownUpFill24Icon, ArrowRightFill18Icon, DropdownRightFill18Icon, ArrowLeftOutline24Icon, ArrowRightOutline24Icon, ErrorOutline24Icon, AltTransportOutline24Icon, WarningOutline24Icon, SuccessOutline24Icon, InformationOutline24Icon, TrainFill18Icon, TrainFill24Icon, TrainFill30Icon, ExpressBusFill18Icon, ExpressBusFill24Icon, ExpressBusFill30Icon, BusFill18Icon, BusFill24Icon, BusFill30Icon, FerryFill18Icon, FerryFill24Icon, FerryFill30Icon, SubwayFill18Icon, SubwayFill24Icon, SubwayFill30Icon, TramFill18Icon, TramFill24Icon, TramFill30Icon, AltTransportFill18Icon, AltTransportFill24Icon, AltTransportFill30Icon, WalkFill18Icon, WalkFill24Icon, WalkFill30Icon } from '@vygruppen/spor-icon-react';
+import { CloseFill30Icon, CloseFill24Icon, CloseFill18Icon, CalendarOutline24Icon, CloseOutline24Icon, SearchOutline24Icon, InformationFill24Icon, InformationFill18Icon, WarningFill24Icon, WarningFill18Icon, ErrorFill24Icon, ErrorFill18Icon, LinkOutOutline24Icon, DropdownLeftFill18Icon, DropdownRightFill18Icon, DropdownDownFill18Icon, DropdownDownFill24Icon, DropdownUpFill24Icon, ArrowRightFill18Icon, DropdownLeftFill24Icon, ArrowLeftOutline24Icon, ArrowRightOutline24Icon, ErrorOutline24Icon, AltTransportOutline24Icon, WarningOutline24Icon, SuccessOutline24Icon, InformationOutline24Icon, TrainFill18Icon, TrainFill24Icon, TrainFill30Icon, ExpressBusFill18Icon, ExpressBusFill24Icon, ExpressBusFill30Icon, BusFill18Icon, BusFill24Icon, BusFill30Icon, FerryFill18Icon, FerryFill24Icon, FerryFill30Icon, SubwayFill18Icon, SubwayFill24Icon, SubwayFill30Icon, TramFill18Icon, TramFill24Icon, TramFill30Icon, AltTransportFill18Icon, AltTransportFill24Icon, AltTransportFill30Icon, WalkFill18Icon, WalkFill24Icon, WalkFill30Icon } from '@vygruppen/spor-icon-react';
 import { inlineLoaderColorData, spinnerColorData, contentLoaderData, fullScreenLoaderWhiteData, inlineLoaderDarkData, spinnerDarkData, fullScreenLoaderBlackData, inlineLoaderLightData, spinnerLightData } from '@vygruppen/spor-loader';
 import { useLottie } from 'lottie-react';
-import { useDateSegment, useDateField, useDatePicker, I18nProvider, usePopover, Overlay, DismissButton, useOverlayTrigger, useButton, useProgressBar, useCalendar, useDateRangePicker, useDialog, useFilter, useComboBox, useListBox, useOption, useListBoxSection, useSelect, HiddenSelect, useCalendarGrid, useRangeCalendar, useTimeField, useCalendarCell } from 'react-aria';
+import { useDateSegment, useDateField, useDatePicker, I18nProvider, usePopover, DismissButton, Overlay, useOverlayTrigger, useButton, useProgressBar, useCalendar, useDateRangePicker, useDialog, useFilter, useComboBox, useListBox, useOption, useListBoxSection, useSelect, HiddenSelect, useCalendarGrid, useRangeCalendar, useTimeField, useCalendarCell } from 'react-aria';
 import { motion } from 'framer-motion';
 import { DateFormatter, toCalendar, getMinimumDayInMonth, getMinimumMonthInYear, createCalendar, GregorianCalendar, Time, now, toCalendarDate, toCalendarDateTime, today, startOfWeek, startOfMonth, endOfWeek, endOfMonth, isSameDay, getDayOfWeek, parseTime, getWeeksInMonth, getLocalTimeZone, startOfYear, maxDate, minDate, isEqualDay, isSameMonth, isToday } from '@internationalized/date';
 export { Time } from '@internationalized/date';
@@ -1462,9 +1462,10 @@ var ExpandableAlert = ({
   headingLevel = "h3",
   defaultOpen = false,
   onToggle = () => {
-  }
+  },
+  ...boxProps
 }) => {
-  return /* @__PURE__ */ React49__default.createElement(BaseAlert, { variant, paddingX: 0, paddingY: 0, padding: 0 }, /* @__PURE__ */ React49__default.createElement(
+  return /* @__PURE__ */ React49__default.createElement(BaseAlert, { variant, paddingX: 0, paddingY: 0, padding: 0, ...boxProps }, /* @__PURE__ */ React49__default.createElement(
     Accordion$1,
     {
       onChange: (expandedIndex) => onToggle(expandedIndex === 0),
@@ -2281,6 +2282,7 @@ function $3c0fc76039f1c516$export$60e84778edff6d26(props) {
   let [validSegments, setValidSegments] = (useState)(() => props.value || props.defaultValue ? {
     ...allSegments
   } : {});
+  let clearedSegment = (useRef)();
   let lastCalendarIdentifier = (useRef)(calendar.identifier);
   (useEffect)(() => {
     if (calendar.identifier !== lastCalendarIdentifier.current) {
@@ -2309,11 +2311,18 @@ function $3c0fc76039f1c516$export$60e84778edff6d26(props) {
   let setValue = (newValue) => {
     if (props.isDisabled || props.isReadOnly)
       return;
-    if (Object.keys(validSegments).length >= Object.keys(allSegments).length) {
+    let validKeys = Object.keys(validSegments);
+    let allKeys = Object.keys(allSegments);
+    if (newValue == null) {
+      setDate(null);
+      setPlaceholderDate(($35a22f14a1f04b11$export$66aa2b09de4b1ea5)(props.placeholderValue, granularity, calendar, defaultTimeZone));
+      setValidSegments({});
+    } else if (validKeys.length >= allKeys.length || validKeys.length === allKeys.length - 1 && allSegments.dayPeriod && !validSegments.dayPeriod && clearedSegment.current !== "dayPeriod") {
       newValue = (toCalendar)(newValue, (v === null || v === void 0 ? void 0 : v.calendar) || new (GregorianCalendar)());
       setDate(newValue);
     } else
       setPlaceholderDate(newValue);
+    clearedSegment.current = null;
   };
   let dateValue = (useMemo)(() => displayValue.toDate(timeZone), [
     displayValue,
@@ -2364,7 +2373,9 @@ function $3c0fc76039f1c516$export$60e84778edff6d26(props) {
   let adjustSegment = (type, amount) => {
     if (!validSegments[type]) {
       markValid(type);
-      if (Object.keys(validSegments).length >= Object.keys(allSegments).length)
+      let validKeys = Object.keys(validSegments);
+      let allKeys = Object.keys(allSegments);
+      if (validKeys.length >= allKeys.length || validKeys.length === allKeys.length - 1 && allSegments.dayPeriod && !validSegments.dayPeriod)
         setValue(displayValue);
     } else
       setValue($3c0fc76039f1c516$var$addSegment(displayValue, type, amount, resolvedOptions));
@@ -2415,6 +2426,7 @@ function $3c0fc76039f1c516$export$60e84778edff6d26(props) {
     },
     clearSegment(part) {
       delete validSegments[part];
+      clearedSegment.current = part;
       setValidSegments({
         ...validSegments
       });
@@ -3564,6 +3576,226 @@ var texts8 = createTexts({
     en: "Open calendar"
   }
 });
+
+// src/theme/foundations/index.ts
+var foundations_exports = {};
+__export(foundations_exports, {
+  borders: () => borders,
+  breakpoints: () => breakpoints,
+  colors: () => colors,
+  config: () => config,
+  fontSizes: () => fontSizes,
+  fontWeights: () => fontWeights,
+  fonts: () => fonts,
+  lineHeights: () => lineHeights,
+  radii: () => radii,
+  shadows: () => shadows,
+  sizes: () => sizes,
+  space: () => space,
+  spacing: () => spacing,
+  textStyles: () => textStyles,
+  zIndices: () => zIndices
+});
+var borders = {
+  none: "0",
+  sm: `${tokens10__default.size.stroke.sm} solid`,
+  "sm-dashed": `${tokens10__default.size.stroke.sm} dashed`,
+  md: `${tokens10__default.size.stroke.md} solid`,
+  "md-dashed": `${tokens10__default.size.stroke.md} dashed`,
+  lg: `${tokens10__default.size.stroke.lg} solid`,
+  "lg-dashed": `${tokens10__default.size.stroke.lg} dashed`
+};
+var breakpoints = {
+  sm: tokens10__default.size.breakpoint.sm,
+  md: tokens10__default.size.breakpoint.md,
+  lg: tokens10__default.size.breakpoint.lg,
+  xl: tokens10__default.size.breakpoint.lg,
+  "2xl": tokens10__default.size.breakpoint.lg
+};
+var colors = {
+  ...tokens10__default.color.alias,
+  ...tokens10__default.color.palette,
+  linjetag: tokens10__default.color.linjetag
+};
+
+// src/theme/foundations/config.ts
+var config = {
+  cssVarPrefix: "spor",
+  initialColorMode: "light",
+  useSystemColorMode: false
+};
+var fonts = {
+  body: tokens10__default.font.family.body,
+  heading: tokens10__default.font.family.heading,
+  mono: tokens10__default.font.family.monospace
+};
+var fontSizes = {
+  "2xs": tokens10__default.size.font.xs.mobile,
+  xs: tokens10__default.size.font.sm.mobile,
+  sm: tokens10__default.size.font.md.mobile,
+  md: tokens10__default.size.font.lg.mobile,
+  lg: tokens10__default.size.font.xl.mobile,
+  xl: tokens10__default.size.font.xxl.mobile,
+  "2xl": tokens10__default.size.font.xl.desktop,
+  "3xl": tokens10__default.size.font.xxl.desktop,
+  mobile: {
+    xs: tokens10__default.size.font.xs.mobile,
+    sm: tokens10__default.size.font.sm.mobile,
+    md: tokens10__default.size.font.md.mobile,
+    lg: tokens10__default.size.font.lg.mobile,
+    xl: tokens10__default.size.font.xl.mobile,
+    xxl: tokens10__default.size.font.xxl.mobile
+  },
+  desktop: {
+    xs: tokens10__default.size.font.xs.desktop,
+    sm: tokens10__default.size.font.sm.desktop,
+    md: tokens10__default.size.font.md.desktop,
+    lg: tokens10__default.size.font.lg.desktop,
+    xl: tokens10__default.size.font.xl.desktop,
+    xxl: tokens10__default.size.font.xxl.desktop
+  }
+};
+
+// src/theme/foundations/fontWeights.ts
+var fontWeights = {
+  light: 300,
+  medium: 400,
+  bold: 700
+};
+var lineHeights = {
+  normal: tokens10__default.font.style.lg["line-height"]
+};
+var radii = {
+  none: tokens10__default.size["border-radius"].none,
+  xs: tokens10__default.size["border-radius"].xs,
+  sm: tokens10__default.size["border-radius"].sm,
+  md: tokens10__default.size["border-radius"].md,
+  lg: tokens10__default.size["border-radius"].lg,
+  xl: tokens10__default.size["border-radius"].xl,
+  "2xl": tokens10__default.size["border-radius"]["2xl"],
+  round: "50%"
+};
+var shadows = {
+  none: "none",
+  sm: tokens10__default.depth.shadow.sm.value,
+  md: tokens10__default.depth.shadow.md.value,
+  lg: tokens10__default.depth.shadow.lg.value
+};
+var spacing = Object.entries(tokens10__default.size.spacing).reduce(
+  (tokens14, [key, token]) => ({
+    ...tokens14,
+    [Number(key)]: token
+  }),
+  {}
+);
+var space = spacing;
+
+// src/theme/foundations/sizes.ts
+var largeSizes = {
+  max: "max-content",
+  min: "min-content",
+  full: "100%",
+  "3xs": "14rem",
+  "2xs": "16rem",
+  xs: "20rem",
+  sm: "24rem",
+  md: "28rem",
+  lg: "32rem",
+  xl: "36rem",
+  "2xl": "42rem",
+  "3xl": "48rem",
+  "4xl": "56rem",
+  "5xl": "64rem",
+  "6xl": "72rem",
+  "7xl": "80rem",
+  "8xl": "90rem"
+};
+var container = {
+  sm: "640px",
+  md: "768px",
+  lg: "1024px",
+  xl: "1280px"
+};
+var sizes = {
+  ...spacing,
+  ...largeSizes,
+  container
+};
+var textStyles = {
+  "2xl": {
+    fontSize: [
+      tokens10__default.font.style.xxl["font-size"].mobile,
+      tokens10__default.font.style.xxl["font-size"].desktop
+    ],
+    fontFamily: tokens10__default.font.style.xxl["font-family"],
+    lineHeight: tokens10__default.font.style.xxl["line-height"]
+  },
+  "xl-display": {
+    fontSize: [
+      tokens10__default.font.style["xl-display"]["font-size"].mobile,
+      tokens10__default.font.style["xl-display"]["font-size"].desktop
+    ],
+    fontFamily: tokens10__default.font.style["xl-display"]["font-family"],
+    lineHeight: tokens10__default.font.style["xl-display"]["line-height"]
+  },
+  "xl-sans": {
+    fontSize: [
+      tokens10__default.font.style["xl-sans"]["font-size"].mobile,
+      tokens10__default.font.style["xl-sans"]["font-size"].desktop
+    ],
+    fontFamily: tokens10__default.font.style["xl-sans"]["font-family"],
+    lineHeight: tokens10__default.font.style["xl-sans"]["line-height"]
+  },
+  lg: {
+    fontSize: [
+      tokens10__default.font.style.lg["font-size"].mobile,
+      tokens10__default.font.style.lg["font-size"].desktop
+    ],
+    fontFamily: tokens10__default.font.style.lg["font-family"],
+    lineHeight: tokens10__default.font.style.lg["line-height"]
+  },
+  md: {
+    fontSize: [
+      tokens10__default.font.style.md["font-size"].mobile,
+      tokens10__default.font.style.md["font-size"].desktop
+    ],
+    fontFamily: tokens10__default.font.style.md["font-family"],
+    lineHeight: tokens10__default.font.style.md["line-height"]
+  },
+  sm: {
+    fontSize: [
+      tokens10__default.font.style.sm["font-size"].mobile,
+      tokens10__default.font.style.sm["font-size"].desktop
+    ],
+    fontFamily: tokens10__default.font.style.sm["font-family"],
+    lineHeight: tokens10__default.font.style.sm["line-height"]
+  },
+  xs: {
+    fontSize: [
+      tokens10__default.font.style.xs["font-size"].mobile,
+      tokens10__default.font.style.xs["font-size"].desktop
+    ],
+    fontFamily: tokens10__default.font.style.xs["font-family"],
+    lineHeight: tokens10__default.font.style.xs["line-height"]
+  }
+};
+var zIndices = {
+  hide: tokens10__default.depth["z-index"].hide,
+  auto: "auto",
+  base: tokens10__default.depth["z-index"].base,
+  docked: tokens10__default.depth["z-index"].docked,
+  dropdown: tokens10__default.depth["z-index"].dropdown,
+  sticky: tokens10__default.depth["z-index"].sticky,
+  banner: tokens10__default.depth["z-index"].banner,
+  overlay: tokens10__default.depth["z-index"].overlay,
+  modal: tokens10__default.depth["z-index"].modal,
+  popover: tokens10__default.depth["z-index"].popover,
+  skipLink: tokens10__default.depth["z-index"].skipLink,
+  toast: tokens10__default.depth["z-index"].toast,
+  tooltip: tokens10__default.depth["z-index"].tooltip
+};
+
+// src/datepicker/DateTimeSegment.tsx
 var DateTimeSegment = forwardRef$1(
   ({ segment, state: state2 }, externalRef) => {
     const internalRef = useRef(null);
@@ -3585,7 +3817,8 @@ var DateTimeSegment = forwardRef$1(
         style: {
           ...segmentProps.style,
           fontVariantNumeric: "tabular-nums",
-          boxSizing: "content-box"
+          boxSizing: "content-box",
+          color: colors.darkGrey
         },
         paddingX: "1px",
         textAlign: "end",
@@ -3635,10 +3868,12 @@ var DateField = forwardRef$1(
       {
         ...props.labelProps,
         ...labelProps,
-        sx: styles2.inputLabel
+        sx: styles2.inputLabel,
+        position: "absolute",
+        paddingTop: "2px"
       },
       props.label
-    ), /* @__PURE__ */ React49__default.createElement(Flex, { ...fieldProps }, state2.segments.map((segment, i) => /* @__PURE__ */ React49__default.createElement(
+    ), /* @__PURE__ */ React49__default.createElement(Flex, { ...fieldProps, paddingTop: "3", paddingBottom: "0.5" }, state2.segments.map((segment, i) => /* @__PURE__ */ React49__default.createElement(
       DateTimeSegment,
       {
         ref: i === 0 ? ref : void 0,
@@ -3912,10 +4147,12 @@ var TimeField = ({ state: state2, ...props }) => {
       htmlFor: fieldProps.id,
       marginBottom: 0,
       fontSize: "mobile.xs",
-      cursor: "text"
+      cursor: "text",
+      position: "absolute",
+      paddingTop: "2px"
     },
     props.label
-  ), /* @__PURE__ */ React49__default.createElement(Flex, { ...fieldProps, ref }, state2.segments.map((segment) => /* @__PURE__ */ React49__default.createElement(DateTimeSegment, { key: segment.type, segment, state: state2 }))), /* @__PURE__ */ React49__default.createElement(
+  ), /* @__PURE__ */ React49__default.createElement(Flex, { ...fieldProps, ref, paddingTop: "3", paddingBottom: "0.5" }, state2.segments.map((segment) => /* @__PURE__ */ React49__default.createElement(DateTimeSegment, { key: segment.type, segment, state: state2 }))), /* @__PURE__ */ React49__default.createElement(
     "input",
     {
       type: "hidden",
@@ -4008,7 +4245,7 @@ var TimePicker = ({
         borderRadius: "xs",
         "aria-label": backwardsLabel,
         title: backwardsLabel,
-        icon: /* @__PURE__ */ React49__default.createElement(DropdownLeftFill24Icon, null),
+        icon: /* @__PURE__ */ React49__default.createElement(DropdownLeftFill18Icon, null),
         onClick: handleBackwardsClick,
         isDisabled,
         style: isDisabled ? { backgroundColor: "transparent" } : {}
@@ -4023,7 +4260,7 @@ var TimePicker = ({
         borderRadius: "xs",
         "aria-label": forwardsLabel,
         title: forwardsLabel,
-        icon: /* @__PURE__ */ React49__default.createElement(DropdownRightFill24Icon, null),
+        icon: /* @__PURE__ */ React49__default.createElement(DropdownRightFill18Icon, null),
         onClick: handleForwardClick,
         isDisabled,
         style: isDisabled ? { backgroundColor: "transparent" } : {}
@@ -4135,17 +4372,22 @@ var Popover3 = forwardRef$1(
       },
       state2
     );
-    return /* @__PURE__ */ React49__default.createElement(Overlay, null, hasBackdrop && /* @__PURE__ */ React49__default.createElement(Box, { ...underlayProps, position: "fixed", inset: "0" }), /* @__PURE__ */ React49__default.createElement(
+    const popoverBox = /* @__PURE__ */ React49__default.createElement(
       Box,
       {
         ...popoverProps,
         ref: popoverRef,
-        minWidth: ((_a6 = triggerRef.current) == null ? void 0 : _a6.clientWidth) ?? "auto"
+        minWidth: ((_a6 = triggerRef.current) == null ? void 0 : _a6.clientWidth) ?? "auto",
+        marginLeft: -2
       },
       /* @__PURE__ */ React49__default.createElement(DismissButton, { onDismiss: state2.close }),
       children,
       /* @__PURE__ */ React49__default.createElement(DismissButton, { onDismiss: state2.close })
-    ));
+    );
+    if (isNonModal) {
+      return popoverBox;
+    }
+    return /* @__PURE__ */ React49__default.createElement(Overlay, null, hasBackdrop && /* @__PURE__ */ React49__default.createElement(Box, { ...underlayProps, position: "fixed", inset: "0" }), popoverBox);
   }
 );
 
@@ -4316,11 +4558,6 @@ function Combobox({
     shouldCloseOnBlur: true,
     label
   });
-  useOutsideClick({
-    ref: listBoxRef,
-    handler: state2.close,
-    enabled: true
-  });
   const {
     inputProps: { size: size2, ...inputProps },
     listBoxProps
@@ -4337,6 +4574,7 @@ function Combobox({
     Input,
     {
       ...inputProps,
+      "aria-haspopup": "listbox",
       ref: inputRef,
       label,
       borderBottomLeftRadius: state2.isOpen && !isLoading ? 0 : borderBottomLeftRadius,
@@ -4377,6 +4615,7 @@ function Combobox({
       state: state2,
       triggerRef: inputRef,
       ref: popoverRef,
+      isNonModal: true,
       placement: "bottom start",
       shouldFlip: false,
       hasBackdrop: false
@@ -4683,17 +4922,6 @@ var NativeSelect = forwardRef(
     ), label && /* @__PURE__ */ React49__default.createElement(FormLabel3, null, label));
   }
 );
-var colors = {
-  ...tokens10__default.color.alias,
-  ...tokens10__default.color.palette,
-  linjetag: tokens10__default.color.linjetag
-};
-var shadows = {
-  none: "none",
-  sm: tokens10__default.depth.shadow.sm.value,
-  md: tokens10__default.depth.shadow.md.value,
-  lg: tokens10__default.depth.shadow.lg.value
-};
 
 // src/theme/utils/box-shadow-utils.ts
 var getBoxShadowString = (args) => {
@@ -5025,7 +5253,7 @@ var texts13 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React49__default.lazy(() => import('./CountryCodeSelect-PXKYFQHM.mjs'));
+var LazyCountryCodeSelect = React49__default.lazy(() => import('./CountryCodeSelect-PU2FEIUH.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React49__default.createElement(Radio$1, { ...props, ref });
 });
@@ -5099,7 +5327,7 @@ var Textarea = forwardRef((props, ref) => {
   const formControlProps = useFormControlContext();
   const fallbackId = `textarea-${useId()}`;
   const inputId = props.id ?? (formControlProps == null ? void 0 : formControlProps.id) ?? fallbackId;
-  return /* @__PURE__ */ React49__default.createElement(Box, { ...spacingProps }, /* @__PURE__ */ React49__default.createElement(FormLabel, { htmlFor: inputId }, label), /* @__PURE__ */ React49__default.createElement(Textarea$1, { ...rest, id: inputId, ref }));
+  return /* @__PURE__ */ React49__default.createElement(InputGroup, { position: "relative", ...spacingProps }, /* @__PURE__ */ React49__default.createElement(Textarea$1, { ...rest, id: inputId, ref, placeholder: " " }), label && /* @__PURE__ */ React49__default.createElement(FormLabel, { htmlFor: inputId, id: `${inputId}-label` }, label));
 });
 function getSpacingProps(props) {
   const {
@@ -5922,8 +6150,6 @@ function isObject(value) {
   const type = typeof value;
   return value != null && (type === "object" || type === "function") && !Array.isArray(value);
 }
-
-// ../../node_modules/@chakra-ui/theme/dist/chunk-AU77DZXY.mjs
 var transitionProperty = {
   common: "background-color, border-color, color, fill, stroke, opacity, box-shadow, transform",
   colors: "background-color, border-color, color, fill, stroke",
@@ -5951,9 +6177,7 @@ var transition = {
   duration: transitionDuration
 };
 var transition_default = transition;
-
-// ../../node_modules/@chakra-ui/theme/dist/chunk-7OKLMD4V.mjs
-var zIndices = {
+var zIndices2 = {
   hide: -1,
   auto: "auto",
   base: 0,
@@ -5968,20 +6192,16 @@ var zIndices = {
   toast: 1700,
   tooltip: 1800
 };
-var z_index_default = zIndices;
-
-// ../../node_modules/@chakra-ui/theme/dist/chunk-ZV5E32CG.mjs
-var borders = {
+var z_index_default = zIndices2;
+var borders2 = {
   none: 0,
   "1px": "1px solid",
   "2px": "2px solid",
   "4px": "4px solid",
   "8px": "8px solid"
 };
-var borders_default = borders;
-
-// ../../node_modules/@chakra-ui/theme/dist/chunk-DDAHWWWN.mjs
-var breakpoints = {
+var borders_default = borders2;
+var breakpoints2 = {
   base: "0em",
   sm: "30em",
   md: "48em",
@@ -5989,9 +6209,7 @@ var breakpoints = {
   xl: "80em",
   "2xl": "96em"
 };
-var breakpoints_default = breakpoints;
-
-// ../../node_modules/@chakra-ui/theme/dist/chunk-C7H5GWRZ.mjs
+var breakpoints_default = breakpoints2;
 var colors2 = {
   transparent: "transparent",
   current: "currentColor",
@@ -6215,9 +6433,7 @@ var colors2 = {
   }
 };
 var colors_default = colors2;
-
-// ../../node_modules/@chakra-ui/theme/dist/chunk-4REDROSM.mjs
-var radii = {
+var radii2 = {
   none: "0",
   sm: "0.125rem",
   base: "0.25rem",
@@ -6228,9 +6444,7 @@ var radii = {
   "3xl": "1.5rem",
   full: "9999px"
 };
-var radius_default = radii;
-
-// ../../node_modules/@chakra-ui/theme/dist/chunk-DJNGX4VH.mjs
+var radius_default = radii2;
 var shadows2 = {
   xs: "0 0 0 1px rgba(0, 0, 0, 0.05)",
   sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
@@ -6245,8 +6459,6 @@ var shadows2 = {
   "dark-lg": "rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px 5px 10px, rgba(0, 0, 0, 0.4) 0px 15px 40px"
 };
 var shadows_default = shadows2;
-
-// ../../node_modules/@chakra-ui/theme/dist/chunk-OLDNEXT6.mjs
 var blur = {
   none: 0,
   sm: "4px",
@@ -6258,8 +6470,6 @@ var blur = {
   "3xl": "64px"
 };
 var blur_default = blur;
-
-// ../../node_modules/@chakra-ui/theme/dist/chunk-HOOF7HHD.mjs
 var typography = {
   letterSpacings: {
     tighter: "-0.05em",
@@ -6321,9 +6531,7 @@ var typography = {
   }
 };
 var typography_default = typography;
-
-// ../../node_modules/@chakra-ui/theme/dist/chunk-G3IFUAY5.mjs
-var spacing = {
+var spacing2 = {
   px: "1px",
   0.5: "0.125rem",
   1: "0.25rem",
@@ -6358,9 +6566,7 @@ var spacing = {
   80: "20rem",
   96: "24rem"
 };
-
-// ../../node_modules/@chakra-ui/theme/dist/chunk-X4JBRTE2.mjs
-var largeSizes = {
+var largeSizes2 = {
   max: "max-content",
   min: "min-content",
   full: "100%",
@@ -6380,20 +6586,18 @@ var largeSizes = {
   "8xl": "90rem",
   prose: "60ch"
 };
-var container = {
+var container2 = {
   sm: "640px",
   md: "768px",
   lg: "1024px",
   xl: "1280px"
 };
-var sizes = {
-  ...spacing,
-  ...largeSizes,
-  container
+var sizes2 = {
+  ...spacing2,
+  ...largeSizes2,
+  container: container2
 };
-var sizes_default = sizes;
-
-// ../../node_modules/@chakra-ui/theme/dist/chunk-VYR6F67Y.mjs
+var sizes_default = sizes2;
 var foundations = {
   breakpoints: breakpoints_default,
   zIndices: z_index_default,
@@ -6403,7 +6607,7 @@ var foundations = {
   ...typography_default,
   sizes: sizes_default,
   shadows: shadows_default,
-  space: spacing,
+  space: spacing2,
   borders: borders_default,
   transition: transition_default
 };
@@ -7148,7 +7352,7 @@ var ring = {
   ringOffsetColor: t.colors("--chakra-ring-offset-color"),
   ringInset: t.prop("--chakra-ring-inset")
 };
-var space = {
+var space2 = {
   margin: t.spaceT("margin"),
   marginTop: t.spaceT("marginTop"),
   marginBlockStart: t.spaceT("marginBlockStart"),
@@ -7176,29 +7380,29 @@ var space = {
   paddingY: t.space(["paddingTop", "paddingBottom"]),
   paddingBlock: t.space("paddingBlock")
 };
-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
+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
 });
 var textDecoration = {
   textDecorationColor: t.colors("textDecorationColor"),
@@ -7467,7 +7671,7 @@ var systemProps = (0, import_lodash3.default)(
   others,
   position,
   effect,
-  space,
+  space2,
   scroll,
   typography2,
   textDecoration,
@@ -7475,7 +7679,7 @@ var systemProps = (0, import_lodash3.default)(
   list,
   transition2
 );
-Object.assign({}, space, layout, flexbox, grid, position);
+Object.assign({}, space2, layout, flexbox, grid, position);
 [...Object.keys(systemProps), ...pseudoPropNames];
 ({ ...systemProps, ...pseudoSelectors });
 function defineStyle(styles2) {
@@ -7494,8 +7698,6 @@ function createMultiStyleConfigHelpers(parts14) {
     }
   };
 }
-
-// ../../node_modules/@chakra-ui/theme/dist/chunk-HAMNZXTQ.mjs
 var { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers([
   "stepper",
   "step",
@@ -7640,8 +7842,6 @@ var stepperTheme = defineMultiStyleConfig({
     colorScheme: "blue"
   }
 });
-
-// ../../node_modules/@chakra-ui/anatomy/dist/chunk-ZN6IUO2A.mjs
 function anatomy(name, map = {}) {
   let called = false;
   function assert() {
@@ -7704,8 +7904,6 @@ function anatomy(name, map = {}) {
     __type
   };
 }
-
-// ../../node_modules/@chakra-ui/anatomy/dist/chunk-HAKT6JCA.mjs
 var accordionAnatomy = anatomy("accordion").parts("root", "container", "button", "panel").extend("icon");
 var alertAnatomy = anatomy("alert").parts("title", "description", "container").extend("icon", "spinner");
 var avatarAnatomy = anatomy("avatar").parts("label", "badge", "container").extend("excessLabel", "group");
@@ -7725,9 +7923,14 @@ var formAnatomy = anatomy("form").parts(
   "helperText"
 );
 var formErrorAnatomy = anatomy("formError").parts("text", "icon");
-var inputAnatomy = anatomy("input").parts("addon", "field", "element");
+var inputAnatomy = anatomy("input").parts(
+  "addon",
+  "field",
+  "element",
+  "group"
+);
 var listAnatomy = anatomy("list").parts("container", "item", "icon");
-var menuAnatomy = anatomy("menu").parts("button", "list", "item").extend("groupTitle", "command", "divider");
+var menuAnatomy = anatomy("menu").parts("button", "list", "item").extend("groupTitle", "icon", "command", "divider");
 var modalAnatomy = anatomy("modal").parts("overlay", "dialogContainer", "dialog").extend("header", "closeButton", "body", "footer");
 var numberInputAnatomy = anatomy("numberinput").parts(
   "root",
@@ -7854,7 +8057,7 @@ var baseStyle2 = definePartsStyle2((props) => ({
   track: baseStyleTrack(props),
   thumb: baseStyleThumb
 }));
-var sizes2 = {
+var sizes3 = {
   sm: definePartsStyle2({
     container: {
       [$width.variable]: "1.375rem",
@@ -7876,7 +8079,7 @@ var sizes2 = {
 };
 var switchTheme = defineMultiStyleConfig2({
   baseStyle: baseStyle2,
-  sizes: sizes2,
+  sizes: sizes3,
   defaultProps: {
     size: "md",
     colorScheme: "blue"
@@ -7981,7 +8184,7 @@ var variants = {
   striped: variantStripe,
   unstyled: defineStyle({})
 };
-var sizes3 = {
+var sizes4 = {
   sm: definePartsStyle3({
     th: {
       px: "4",
@@ -8041,7 +8244,7 @@ var sizes3 = {
 var tableTheme = defineMultiStyleConfig3({
   baseStyle: baseStyle3,
   variants,
-  sizes: sizes3,
+  sizes: sizes4,
   defaultProps: {
     variant: "simple",
     size: "md",
@@ -8095,7 +8298,7 @@ var baseStyle4 = definePartsStyle4((props) => ({
   tablist: baseStyleTablist(props),
   tabpanel: baseStyleTabpanel
 }));
-var sizes4 = {
+var sizes5 = {
   sm: definePartsStyle4({
     tab: {
       py: 1,
@@ -8264,7 +8467,7 @@ var variants2 = {
 };
 var tabsTheme = defineMultiStyleConfig4({
   baseStyle: baseStyle4,
-  sizes: sizes4,
+  sizes: sizes5,
   variants: variants2,
   defaultProps: {
     size: "md",
@@ -8331,8 +8534,6 @@ var badgeTheme = defineStyleConfig({
     colorScheme: "gray"
   }
 });
-
-// ../../node_modules/@chakra-ui/theme/dist/chunk-XJB4FHJM.mjs
 var { defineMultiStyleConfig: defineMultiStyleConfig5, definePartsStyle: definePartsStyle5 } = createMultiStyleConfigHelpers(tagAnatomy.keys);
 var $bg3 = cssVar("tag-bg");
 var $color = cssVar("tag-color");
@@ -8393,7 +8594,7 @@ var baseStyle6 = definePartsStyle5({
   label: baseStyleLabel,
   closeButton: baseStyleCloseButton
 });
-var sizes5 = {
+var sizes6 = {
   sm: definePartsStyle5({
     container: {
       [$minH.variable]: "sizes.5",
@@ -8446,7 +8647,7 @@ var variants4 = {
 var tagTheme = defineMultiStyleConfig5({
   variants: variants4,
   baseStyle: baseStyle6,
-  sizes: sizes5,
+  sizes: sizes6,
   defaultProps: {
     size: "md",
     variant: "subtle",
@@ -8454,9 +8655,23 @@ var tagTheme = defineMultiStyleConfig5({
   }
 });
 var { definePartsStyle: definePartsStyle6, defineMultiStyleConfig: defineMultiStyleConfig6 } = createMultiStyleConfigHelpers(inputAnatomy.keys);
+var $height2 = cssVar("input-height");
+var $fontSize2 = cssVar("input-font-size");
+var $padding = cssVar("input-padding");
+var $borderRadius = cssVar("input-border-radius");
 var baseStyle7 = definePartsStyle6({
+  addon: {
+    height: $height2.reference,
+    fontSize: $fontSize2.reference,
+    px: $padding.reference,
+    borderRadius: $borderRadius.reference
+  },
   field: {
     width: "100%",
+    height: $height2.reference,
+    fontSize: $fontSize2.reference,
+    px: $padding.reference,
+    borderRadius: $borderRadius.reference,
     minWidth: 0,
     outline: 0,
     position: "relative",
@@ -8471,46 +8686,46 @@ var baseStyle7 = definePartsStyle6({
 });
 var size = {
   lg: defineStyle({
-    fontSize: "lg",
-    px: "4",
-    h: "12",
-    borderRadius: "md"
+    [$fontSize2.variable]: "fontSizes.lg",
+    [$padding.variable]: "space.4",
+    [$borderRadius.variable]: "radii.md",
+    [$height2.variable]: "sizes.12"
   }),
   md: defineStyle({
-    fontSize: "md",
-    px: "4",
-    h: "10",
-    borderRadius: "md"
+    [$fontSize2.variable]: "fontSizes.md",
+    [$padding.variable]: "space.4",
+    [$borderRadius.variable]: "radii.md",
+    [$height2.variable]: "sizes.10"
   }),
   sm: defineStyle({
-    fontSize: "sm",
-    px: "3",
-    h: "8",
-    borderRadius: "sm"
+    [$fontSize2.variable]: "fontSizes.sm",
+    [$padding.variable]: "space.3",
+    [$borderRadius.variable]: "radii.sm",
+    [$height2.variable]: "sizes.8"
   }),
   xs: defineStyle({
-    fontSize: "xs",
-    px: "2",
-    h: "6",
-    borderRadius: "sm"
+    [$fontSize2.variable]: "fontSizes.xs",
+    [$padding.variable]: "space.2",
+    [$borderRadius.variable]: "radii.sm",
+    [$height2.variable]: "sizes.6"
   })
 };
-var sizes6 = {
+var sizes7 = {
   lg: definePartsStyle6({
     field: size.lg,
-    addon: size.lg
+    group: size.lg
   }),
   md: definePartsStyle6({
     field: size.md,
-    addon: size.md
+    group: size.md
   }),
   sm: definePartsStyle6({
     field: size.sm,
-    addon: size.sm
+    group: size.sm
   }),
   xs: definePartsStyle6({
     field: size.xs,
-    addon: size.xs
+    group: size.xs
   })
 };
 function getDefaults(props) {
@@ -8634,15 +8849,13 @@ var variants5 = {
 };
 var inputTheme = defineMultiStyleConfig6({
   baseStyle: baseStyle7,
-  sizes: sizes6,
+  sizes: sizes7,
   variants: variants5,
   defaultProps: {
     size: "md",
     variant: "outline"
   }
 });
-
-// ../../node_modules/@chakra-ui/theme/dist/chunk-OIGZPHLT.mjs
 var _a;
 var baseStyle8 = defineStyle({
   ...(_a = inputTheme.baseStyle) == null ? void 0 : _a.field,
@@ -8682,7 +8895,7 @@ var _e;
 var _f;
 var _g;
 var _h;
-var sizes7 = {
+var sizes8 = {
   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 : {},
@@ -8690,7 +8903,7 @@ var sizes7 = {
 };
 var textareaTheme = defineStyleConfig({
   baseStyle: baseStyle8,
-  sizes: sizes7,
+  sizes: sizes8,
   variants: variants6,
   defaultProps: {
     size: "md",
@@ -8765,7 +8978,7 @@ var baseStyle10 = definePartsStyle7((props) => ({
   filledTrack: baseStyleFilledTrack(props),
   track: baseStyleTrack2(props)
 }));
-var sizes8 = {
+var sizes9 = {
   xs: definePartsStyle7({
     track: { h: "1" }
   }),
@@ -8780,15 +8993,13 @@ var sizes8 = {
   })
 };
 var progressTheme = defineMultiStyleConfig7({
-  sizes: sizes8,
+  sizes: sizes9,
   baseStyle: baseStyle10,
   defaultProps: {
     size: "md",
     colorScheme: "blue"
   }
 });
-
-// ../../node_modules/@chakra-ui/theme/dist/chunk-EBS47JIL.mjs
 var isFunction = (value) => typeof value === "function";
 function runIfFn(valueOrFn, ...args) {
   return isFunction(valueOrFn) ? valueOrFn(...args) : valueOrFn;
@@ -8854,7 +9065,7 @@ var baseStyle11 = definePartsStyle8((props) => ({
   control: runIfFn(baseStyleControl, props),
   label: baseStyleLabel3
 }));
-var sizes9 = {
+var sizes10 = {
   sm: definePartsStyle8({
     control: { [$size2.variable]: "sizes.3" },
     label: { fontSize: "sm" },
@@ -8873,14 +9084,12 @@ var sizes9 = {
 };
 var checkboxTheme = defineMultiStyleConfig8({
   baseStyle: baseStyle11,
-  sizes: sizes9,
+  sizes: sizes10,
   defaultProps: {
     size: "md",
     colorScheme: "blue"
   }
 });
-
-// ../../node_modules/@chakra-ui/theme/dist/chunk-JDPWIQ7H.mjs
 var { defineMultiStyleConfig: defineMultiStyleConfig9, definePartsStyle: definePartsStyle9 } = createMultiStyleConfigHelpers(radioAnatomy.keys);
 var baseStyleControl2 = defineStyle((props) => {
   var _a6;
@@ -8910,7 +9119,7 @@ var baseStyle12 = definePartsStyle9((props) => {
     control: baseStyleControl2(props)
   };
 });
-var sizes10 = {
+var sizes11 = {
   md: definePartsStyle9({
     control: { w: "4", h: "4" },
     label: { fontSize: "md" }
@@ -8926,14 +9135,12 @@ var sizes10 = {
 };
 var radioTheme = defineMultiStyleConfig9({
   baseStyle: baseStyle12,
-  sizes: sizes10,
+  sizes: sizes11,
   defaultProps: {
     size: "md",
     colorScheme: "blue"
   }
 });
-
-// ../../node_modules/@chakra-ui/theme/dist/chunk-V3RHVDKJ.mjs
 var { defineMultiStyleConfig: defineMultiStyleConfig10, definePartsStyle: definePartsStyle10 } = createMultiStyleConfigHelpers(selectAnatomy.keys);
 var $bg5 = cssVar("select-bg");
 var _a4;
@@ -8977,7 +9184,7 @@ var _e2;
 var _f2;
 var _g2;
 var _h2;
-var sizes11 = {
+var sizes12 = {
   lg: {
     ...(_a22 = inputTheme.sizes) == null ? void 0 : _a22.lg,
     field: {
@@ -9012,12 +9219,10 @@ var sizes11 = {
 };
 var selectTheme = defineMultiStyleConfig10({
   baseStyle: baseStyle13,
-  sizes: sizes11,
+  sizes: sizes12,
   variants: inputTheme.variants,
   defaultProps: inputTheme.defaultProps
 });
-
-// ../../node_modules/@chakra-ui/theme/dist/chunk-YSULOCDF.mjs
 var $startColor = cssVar("skeleton-start-color");
 var $endColor = cssVar("skeleton-end-color");
 var baseStyle14 = defineStyle({
@@ -9035,8 +9240,6 @@ var baseStyle14 = defineStyle({
 var skeletonTheme = defineStyleConfig({
   baseStyle: baseStyle14
 });
-
-// ../../node_modules/@chakra-ui/theme/dist/chunk-RSEFU3LC.mjs
 var $bg6 = cssVar("skip-link-bg");
 var baseStyle15 = defineStyle({
   borderRadius: "md",
@@ -9182,14 +9385,14 @@ var sizeSm = definePartsStyle11({
     [$trackSize.variable]: `sizes.0.5`
   }
 });
-var sizes12 = {
+var sizes13 = {
   lg: sizeLg,
   md: sizeMd,
   sm: sizeSm
 };
 var sliderTheme = defineMultiStyleConfig11({
   baseStyle: baseStyle16,
-  sizes: sizes12,
+  sizes: sizes13,
   defaultProps: {
     size: "md",
     colorScheme: "blue"
@@ -9200,7 +9403,7 @@ var baseStyle17 = defineStyle({
   width: [$size3.reference],
   height: [$size3.reference]
 });
-var sizes13 = {
+var sizes14 = {
   xs: defineStyle({
     [$size3.variable]: "sizes.3"
   }),
@@ -9219,13 +9422,11 @@ var sizes13 = {
 };
 var spinnerTheme = defineStyleConfig({
   baseStyle: baseStyle17,
-  sizes: sizes13,
+  sizes: sizes14,
   defaultProps: {
     size: "md"
   }
 });
-
-// ../../node_modules/@chakra-ui/theme/dist/chunk-EY6ACYQS.mjs
 var { defineMultiStyleConfig: defineMultiStyleConfig12, definePartsStyle: definePartsStyle12 } = createMultiStyleConfigHelpers(statAnatomy.keys);
 var baseStyleLabel4 = defineStyle({
   fontWeight: "medium"
@@ -9251,7 +9452,7 @@ var baseStyle18 = definePartsStyle12({
   number: baseStyleNumber,
   icon: baseStyleIcon3
 });
-var sizes14 = {
+var sizes15 = {
   md: definePartsStyle12({
     label: { fontSize: "sm" },
     helpText: { fontSize: "sm" },
@@ -9260,13 +9461,11 @@ var sizes14 = {
 };
 var statTheme = defineMultiStyleConfig12({
   baseStyle: baseStyle18,
-  sizes: sizes14,
+  sizes: sizes15,
   defaultProps: {
     size: "md"
   }
 });
-
-// ../../node_modules/@chakra-ui/theme/dist/chunk-VQ2DUS6J.mjs
 var $bg8 = cssVar("kbd-bg");
 var baseStyle19 = defineStyle({
   [$bg8.variable]: "colors.gray.100",
@@ -9286,8 +9485,6 @@ var baseStyle19 = defineStyle({
 var kbdTheme = defineStyleConfig({
   baseStyle: baseStyle19
 });
-
-// ../../node_modules/@chakra-ui/theme/dist/chunk-2T5TO72C.mjs
 var baseStyle20 = defineStyle({
   transitionProperty: "common",
   transitionDuration: "fast",
@@ -9306,8 +9503,6 @@ var baseStyle20 = defineStyle({
 var linkTheme = defineStyleConfig({
   baseStyle: baseStyle20
 });
-
-// ../../node_modules/@chakra-ui/theme/dist/chunk-AQJ6AIMN.mjs
 var { defineMultiStyleConfig: defineMultiStyleConfig13, definePartsStyle: definePartsStyle13 } = createMultiStyleConfigHelpers(listAnatomy.keys);
 var baseStyleIcon4 = defineStyle({
   marginEnd: "2",
@@ -9320,8 +9515,6 @@ var baseStyle21 = definePartsStyle13({
 var listTheme = defineMultiStyleConfig13({
   baseStyle: baseStyle21
 });
-
-// ../../node_modules/@chakra-ui/theme/dist/chunk-FIWRYWVW.mjs
 var { defineMultiStyleConfig: defineMultiStyleConfig14, definePartsStyle: definePartsStyle14 } = createMultiStyleConfigHelpers(menuAnatomy.keys);
 var $bg9 = cssVar("menu-bg");
 var $shadow2 = cssVar("menu-shadow");
@@ -9377,6 +9570,12 @@ var baseStyleGroupTitle = defineStyle({
   fontWeight: "semibold",
   fontSize: "sm"
 });
+var baseStyleIcon5 = defineStyle({
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  flexShrink: 0
+});
 var baseStyleCommand = defineStyle({
   opacity: 0.6
 });
@@ -9396,14 +9595,13 @@ var baseStyle22 = definePartsStyle14({
   list: baseStyleList,
   item: baseStyleItem,
   groupTitle: baseStyleGroupTitle,
+  icon: baseStyleIcon5,
   command: baseStyleCommand,
   divider: baseStyleDivider
 });
 var menuTheme = defineMultiStyleConfig14({
   baseStyle: baseStyle22
 });
-
-// ../../node_modules/@chakra-ui/theme/dist/chunk-XHTV2ZQR.mjs
 var { defineMultiStyleConfig: defineMultiStyleConfig15, definePartsStyle: definePartsStyle15 } = createMultiStyleConfigHelpers(modalAnatomy.keys);
 var $bg10 = cssVar("modal-bg");
 var $shadow3 = cssVar("modal-shadow");
@@ -9489,7 +9687,7 @@ function getSize(value) {
     dialog: { maxW: value }
   });
 }
-var sizes15 = {
+var sizes16 = {
   xs: getSize("xs"),
   sm: getSize("sm"),
   md: getSize("md"),
@@ -9504,7 +9702,7 @@ var sizes15 = {
 };
 var modalTheme = defineMultiStyleConfig15({
   baseStyle: baseStyle23,
-  sizes: sizes15,
+  sizes: sizes16,
   defaultProps: { size: "md" }
 });
 var { defineMultiStyleConfig: defineMultiStyleConfig16, definePartsStyle: definePartsStyle16 } = createMultiStyleConfigHelpers(numberInputAnatomy.keys);
@@ -9588,7 +9786,7 @@ function getSize2(size2) {
     }
   });
 }
-var sizes16 = {
+var sizes17 = {
   xs: getSize2("xs"),
   sm: getSize2("sm"),
   md: getSize2("md"),
@@ -9596,18 +9794,16 @@ var sizes16 = {
 };
 var numberInputTheme = defineMultiStyleConfig16({
   baseStyle: baseStyle24,
-  sizes: sizes16,
+  sizes: sizes17,
   variants: inputTheme.variants,
   defaultProps: inputTheme.defaultProps
 });
-
-// ../../node_modules/@chakra-ui/theme/dist/chunk-QW3Z4V42.mjs
 var _a5;
 var baseStyle25 = defineStyle({
   ...(_a5 = inputTheme.baseStyle) == null ? void 0 : _a5.field,
   textAlign: "center"
 });
-var sizes17 = {
+var sizes18 = {
   lg: defineStyle({
     fontSize: "lg",
     w: 12,
@@ -9658,7 +9854,7 @@ var variants7 = {
 };
 var pinInputTheme = defineStyleConfig({
   baseStyle: baseStyle25,
-  sizes: sizes17,
+  sizes: sizes18,
   variants: variants7,
   defaultProps: inputTheme.defaultProps
 });
@@ -9719,8 +9915,6 @@ var baseStyle26 = definePartsStyle17({
 var popoverTheme = defineMultiStyleConfig17({
   baseStyle: baseStyle26
 });
-
-// ../../node_modules/@chakra-ui/theme/dist/chunk-PQSF5PVS.mjs
 var { definePartsStyle: definePartsStyle18, defineMultiStyleConfig: defineMultiStyleConfig18 } = createMultiStyleConfigHelpers(drawerAnatomy.keys);
 var $bg12 = cssVar("drawer-bg");
 var $bs = cssVar("drawer-box-shadow");
@@ -9790,7 +9984,7 @@ var baseStyle27 = definePartsStyle18((props) => ({
   body: baseStyleBody3,
   footer: baseStyleFooter3
 }));
-var sizes18 = {
+var sizes19 = {
   xs: getSize3("xs"),
   sm: getSize3("md"),
   md: getSize3("lg"),
@@ -9800,13 +9994,11 @@ var sizes18 = {
 };
 var drawerTheme = defineMultiStyleConfig18({
   baseStyle: baseStyle27,
-  sizes: sizes18,
+  sizes: sizes19,
   defaultProps: {
     size: "xs"
   }
 });
-
-// ../../node_modules/@chakra-ui/theme/dist/chunk-YZVOF4MP.mjs
 var { definePartsStyle: definePartsStyle19, defineMultiStyleConfig: defineMultiStyleConfig19 } = createMultiStyleConfigHelpers(editableAnatomy.keys);
 var baseStylePreview = defineStyle({
   borderRadius: "md",
@@ -9840,8 +10032,6 @@ var baseStyle28 = definePartsStyle19({
 var editableTheme = defineMultiStyleConfig19({
   baseStyle: baseStyle28
 });
-
-// ../../node_modules/@chakra-ui/theme/dist/chunk-RUW3STUO.mjs
 var { definePartsStyle: definePartsStyle20, defineMultiStyleConfig: defineMultiStyleConfig20 } = createMultiStyleConfigHelpers(formAnatomy.keys);
 var $fg4 = cssVar("form-control-color");
 var baseStyleRequiredIndicator = defineStyle({
@@ -9873,8 +10063,6 @@ var baseStyle29 = definePartsStyle20({
 var formTheme = defineMultiStyleConfig20({
   baseStyle: baseStyle29
 });
-
-// ../../node_modules/@chakra-ui/theme/dist/chunk-D55YRTLZ.mjs
 var { definePartsStyle: definePartsStyle21, defineMultiStyleConfig: defineMultiStyleConfig21 } = createMultiStyleConfigHelpers(formErrorAnatomy.keys);
 var $fg5 = cssVar("form-error-color");
 var baseStyleText = defineStyle({
@@ -9887,7 +10075,7 @@ var baseStyleText = defineStyle({
   fontSize: "sm",
   lineHeight: "normal"
 });
-var baseStyleIcon5 = defineStyle({
+var baseStyleIcon6 = defineStyle({
   marginEnd: "0.5em",
   [$fg5.variable]: `colors.red.500`,
   _dark: {
@@ -9897,13 +10085,11 @@ var baseStyleIcon5 = defineStyle({
 });
 var baseStyle30 = definePartsStyle21({
   text: baseStyleText,
-  icon: baseStyleIcon5
+  icon: baseStyleIcon6
 });
 var formErrorTheme = defineMultiStyleConfig21({
   baseStyle: baseStyle30
 });
-
-// ../../node_modules/@chakra-ui/theme/dist/chunk-OYCZTG3L.mjs
 var baseStyle31 = defineStyle({
   fontSize: "md",
   marginEnd: "3",
@@ -9919,13 +10105,11 @@ var baseStyle31 = defineStyle({
 var formLabelTheme = defineStyleConfig({
   baseStyle: baseStyle31
 });
-
-// ../../node_modules/@chakra-ui/theme/dist/chunk-X4O3JXYB.mjs
 var baseStyle32 = defineStyle({
   fontFamily: "heading",
   fontWeight: "bold"
 });
-var sizes19 = {
+var sizes20 = {
   "4xl": defineStyle({
     fontSize: ["6xl", null, "7xl"],
     lineHeight: 1
@@ -9961,13 +10145,11 @@ var sizes19 = {
 };
 var headingTheme = defineStyleConfig({
   baseStyle: baseStyle32,
-  sizes: sizes19,
+  sizes: sizes20,
   defaultProps: {
     size: "xl"
   }
 });
-
-// ../../node_modules/@chakra-ui/theme/dist/chunk-OZJFUHHJ.mjs
 var { defineMultiStyleConfig: defineMultiStyleConfig22, definePartsStyle: definePartsStyle22 } = createMultiStyleConfigHelpers(breadcrumbAnatomy.keys);
 var $decor = cssVar("breadcrumb-link-decor");
 var baseStyleLink = defineStyle({
@@ -10018,7 +10200,7 @@ var variantGhost = defineStyle((props) => {
   const { colorScheme: c, theme: theme3 } = props;
   if (c === "gray") {
     return {
-      color: mode(`inherit`, `whiteAlpha.900`)(props),
+      color: mode(`gray.800`, `whiteAlpha.900`)(props),
       _hover: {
         bg: mode(`gray.100`, `whiteAlpha.200`)(props)
       },
@@ -10070,6 +10252,7 @@ var variantSolid2 = defineStyle((props) => {
     const bg2 = mode(`gray.100`, `whiteAlpha.200`)(props);
     return {
       bg: bg2,
+      color: mode(`gray.800`, `whiteAlpha.900`)(props),
       _hover: {
         bg: mode(`gray.200`, `whiteAlpha.300`)(props),
         _disabled: {
@@ -10132,7 +10315,7 @@ var variants8 = {
   link: variantLink,
   unstyled: variantUnstyled3
 };
-var sizes20 = {
+var sizes21 = {
   lg: defineStyle({
     h: "12",
     minW: "12",
@@ -10161,18 +10344,16 @@ var sizes20 = {
 var buttonTheme = defineStyleConfig({
   baseStyle: baseStyle34,
   variants: variants8,
-  sizes: sizes20,
+  sizes: sizes21,
   defaultProps: {
     variant: "solid",
     size: "md",
     colorScheme: "gray"
   }
 });
-
-// ../../node_modules/@chakra-ui/theme/dist/chunk-PZHBQTKY.mjs
 var { definePartsStyle: definePartsStyle23, defineMultiStyleConfig: defineMultiStyleConfig23 } = createMultiStyleConfigHelpers(cardAnatomy.keys);
 var $bg13 = cssVar("card-bg");
-var $padding = cssVar("card-padding");
+var $padding2 = cssVar("card-padding");
 var $shadow4 = cssVar("card-shadow");
 var $radius = cssVar("card-radius");
 var $border3 = cssVar("card-border-width", "0");
@@ -10188,33 +10369,33 @@ var baseStyle35 = definePartsStyle23({
     borderColor: $borderColor.reference
   },
   body: {
-    padding: $padding.reference,
+    padding: $padding2.reference,
     flex: "1 1 0%"
   },
   header: {
-    padding: $padding.reference
+    padding: $padding2.reference
   },
   footer: {
-    padding: $padding.reference
+    padding: $padding2.reference
   }
 });
-var sizes21 = {
+var sizes22 = {
   sm: definePartsStyle23({
     container: {
       [$radius.variable]: "radii.base",
-      [$padding.variable]: "space.3"
+      [$padding2.variable]: "space.3"
     }
   }),
   md: definePartsStyle23({
     container: {
       [$radius.variable]: "radii.md",
-      [$padding.variable]: "space.5"
+      [$padding2.variable]: "space.5"
     }
   }),
   lg: definePartsStyle23({
     container: {
       [$radius.variable]: "radii.xl",
-      [$padding.variable]: "space.7"
+      [$padding2.variable]: "space.7"
     }
   })
 };
@@ -10240,20 +10421,20 @@ var variants9 = {
   }),
   unstyled: {
     body: {
-      [$padding.variable]: 0
+      [$padding2.variable]: 0
     },
     header: {
-      [$padding.variable]: 0
+      [$padding2.variable]: 0
     },
     footer: {
-      [$padding.variable]: 0
+      [$padding2.variable]: 0
     }
   }
 };
 var cardTheme = defineMultiStyleConfig23({
   baseStyle: baseStyle35,
   variants: variants9,
-  sizes: sizes21,
+  sizes: sizes22,
   defaultProps: {
     variant: "elevated",
     size: "md"
@@ -10289,7 +10470,7 @@ var baseStyle36 = defineStyle({
   },
   bg: $bg14.reference
 });
-var sizes22 = {
+var sizes23 = {
   lg: defineStyle({
     [$size4.variable]: "sizes.10",
     fontSize: "md"
@@ -10305,13 +10486,11 @@ var sizes22 = {
 };
 var closeButtonTheme = defineStyleConfig({
   baseStyle: baseStyle36,
-  sizes: sizes22,
+  sizes: sizes23,
   defaultProps: {
     size: "md"
   }
 });
-
-// ../../node_modules/@chakra-ui/theme/dist/chunk-CAKKPKRW.mjs
 var { variants: variants10, defaultProps } = badgeTheme;
 var baseStyle37 = defineStyle({
   fontFamily: "mono",
@@ -10327,8 +10506,6 @@ var codeTheme = defineStyleConfig({
   variants: variants10,
   defaultProps
 });
-
-// ../../node_modules/@chakra-ui/theme/dist/chunk-NDGGJV23.mjs
 var baseStyle38 = defineStyle({
   w: "100%",
   mx: "auto",
@@ -10338,8 +10515,6 @@ var baseStyle38 = defineStyle({
 var containerTheme = defineStyleConfig({
   baseStyle: baseStyle38
 });
-
-// ../../node_modules/@chakra-ui/theme/dist/chunk-5Z4IVOU3.mjs
 var baseStyle39 = defineStyle({
   opacity: 0.6,
   borderColor: "inherit"
@@ -10361,8 +10536,6 @@ var dividerTheme = defineStyleConfig({
     variant: "solid"
   }
 });
-
-// ../../node_modules/@chakra-ui/theme/dist/chunk-T276HDLM.mjs
 var { definePartsStyle: definePartsStyle24, defineMultiStyleConfig: defineMultiStyleConfig24 } = createMultiStyleConfigHelpers(accordionAnatomy.keys);
 var baseStyleContainer4 = defineStyle({
   borderTopWidth: "1px",
@@ -10393,14 +10566,14 @@ var baseStylePanel = defineStyle({
   px: "4",
   pb: "5"
 });
-var baseStyleIcon6 = defineStyle({
+var baseStyleIcon7 = defineStyle({
   fontSize: "1.25em"
 });
 var baseStyle40 = definePartsStyle24({
   container: baseStyleContainer4,
   button: baseStyleButton2,
   panel: baseStylePanel,
-  icon: baseStyleIcon6
+  icon: baseStyleIcon7
 });
 var accordionTheme = defineMultiStyleConfig24({ baseStyle: baseStyle40 });
 var { definePartsStyle: definePartsStyle25, defineMultiStyleConfig: defineMultiStyleConfig25 } = createMultiStyleConfigHelpers(alertAnatomy.keys);
@@ -10522,23 +10695,28 @@ var alertTheme = defineMultiStyleConfig25({
 var { definePartsStyle: definePartsStyle26, defineMultiStyleConfig: defineMultiStyleConfig26 } = createMultiStyleConfigHelpers(avatarAnatomy.keys);
 var $border4 = cssVar("avatar-border-color");
 var $bg16 = cssVar("avatar-bg");
+var $fs = cssVar("avatar-font-size");
+var $size5 = cssVar("avatar-size");
 var baseStyleBadge = defineStyle({
   borderRadius: "full",
   border: "0.2em solid",
+  borderColor: $border4.reference,
   [$border4.variable]: "white",
   _dark: {
     [$border4.variable]: "colors.gray.800"
-  },
-  borderColor: $border4.reference
+  }
 });
 var baseStyleExcessLabel = defineStyle({
+  bg: $bg16.reference,
+  fontSize: $fs.reference,
+  width: $size5.reference,
+  height: $size5.reference,
+  lineHeight: "1",
   [$bg16.variable]: "colors.gray.200",
   _dark: {
     [$bg16.variable]: "colors.whiteAlpha.400"
-  },
-  bgColor: $bg16.reference
+  }
 });
-var $avatarBg = cssVar("avatar-background");
 var baseStyleContainer5 = defineStyle((props) => {
   const { name, theme: theme3 } = props;
   const bg = name ? randomColor({ string: name }) : "colors.gray.400";
@@ -10547,43 +10725,46 @@ var baseStyleContainer5 = defineStyle((props) => {
   if (!isBgDark)
     color2 = "gray.800";
   return {
-    bg: $avatarBg.reference,
+    bg: $bg16.reference,
+    fontSize: $fs.reference,
+    color: color2,
+    borderColor: $border4.reference,
+    verticalAlign: "top",
+    width: $size5.reference,
+    height: $size5.reference,
     "&:not([data-loaded])": {
-      [$avatarBg.variable]: bg
+      [$bg16.variable]: bg
     },
-    color: color2,
     [$border4.variable]: "colors.white",
     _dark: {
       [$border4.variable]: "colors.gray.800"
-    },
-    borderColor: $border4.reference,
-    verticalAlign: "top"
+    }
   };
 });
+var baseStyleLabel5 = defineStyle({
+  fontSize: $fs.reference,
+  lineHeight: "1"
+});
 var baseStyle42 = definePartsStyle26((props) => ({
   badge: runIfFn(baseStyleBadge, props),
   excessLabel: runIfFn(baseStyleExcessLabel, props),
-  container: runIfFn(baseStyleContainer5, props)
+  container: runIfFn(baseStyleContainer5, props),
+  label: baseStyleLabel5
 }));
 function getSize4(size2) {
   const themeSize = size2 !== "100%" ? sizes_default[size2] : void 0;
   return definePartsStyle26({
     container: {
-      width: size2,
-      height: size2,
-      fontSize: `calc(${themeSize != null ? themeSize : size2} / 2.5)`
+      [$size5.variable]: themeSize != null ? themeSize : size2,
+      [$fs.variable]: `calc(${themeSize != null ? themeSize : size2} / 2.5)`
     },
     excessLabel: {
-      width: size2,
-      height: size2
-    },
-    label: {
-      fontSize: `calc(${themeSize != null ? themeSize : size2} / 2.5)`,
-      lineHeight: size2 !== "100%" ? themeSize != null ? themeSize : size2 : void 0
+      [$size5.variable]: themeSize != null ? themeSize : size2,
+      [$fs.variable]: `calc(${themeSize != null ? themeSize : size2} / 2.5)`
     }
   });
 }
-var sizes23 = {
+var sizes24 = {
   "2xs": getSize4(4),
   xs: getSize4(6),
   sm: getSize4(8),
@@ -10595,11 +10776,11 @@ var sizes23 = {
 };
 var avatarTheme = defineMultiStyleConfig26({
   baseStyle: baseStyle42,
-  sizes: sizes23,
-  defaultProps: { size: "md" }
+  sizes: sizes24,
+  defaultProps: {
+    size: "md"
+  }
 });
-
-// ../../node_modules/@chakra-ui/theme/dist/chunk-64X4WVHB.mjs
 var components = {
   Accordion: accordionTheme,
   Alert: alertTheme,
@@ -10644,8 +10825,6 @@ var components = {
   Card: cardTheme,
   Stepper: stepperTheme
 };
-
-// ../../node_modules/@chakra-ui/theme/dist/chunk-BF6JLLXF.mjs
 var semanticTokens = {
   colors: {
     "chakra-body-text": { _light: "gray.800", _dark: "whiteAlpha.900" },
@@ -10657,8 +10836,6 @@ var semanticTokens = {
     "chakra-placeholder-color": { _light: "gray.500", _dark: "whiteAlpha.400" }
   }
 };
-
-// ../../node_modules/@chakra-ui/theme/dist/chunk-VHIIIDDT.mjs
 var styles = {
   global: {
     body: {
@@ -10677,10 +10854,8 @@ var styles = {
     }
   }
 };
-
-// ../../node_modules/@chakra-ui/theme/dist/index.mjs
 var direction = "ltr";
-var config = {
+var config2 = {
   useSystemColorMode: false,
   initialColorMode: "light",
   cssVarPrefix: "chakra"
@@ -10691,7 +10866,7 @@ var theme2 = {
   ...foundations,
   components,
   styles,
-  config
+  config: config2
 };
 
 // src/theme/components/index.ts
@@ -10733,213 +10908,6 @@ __export(components_exports, {
   TravelTag: () => travel_tag_default
 });
 
-// src/theme/foundations/index.ts
-var foundations_exports = {};
-__export(foundations_exports, {
-  borders: () => borders2,
-  breakpoints: () => breakpoints2,
-  colors: () => colors,
-  config: () => config2,
-  fontSizes: () => fontSizes,
-  fontWeights: () => fontWeights,
-  fonts: () => fonts,
-  lineHeights: () => lineHeights,
-  radii: () => radii2,
-  shadows: () => shadows,
-  sizes: () => sizes24,
-  space: () => space2,
-  spacing: () => spacing2,
-  textStyles: () => textStyles,
-  zIndices: () => zIndices2
-});
-var borders2 = {
-  none: "0",
-  sm: `${tokens10__default.size.stroke.sm} solid`,
-  "sm-dashed": `${tokens10__default.size.stroke.sm} dashed`,
-  md: `${tokens10__default.size.stroke.md} solid`,
-  "md-dashed": `${tokens10__default.size.stroke.md} dashed`,
-  lg: `${tokens10__default.size.stroke.lg} solid`,
-  "lg-dashed": `${tokens10__default.size.stroke.lg} dashed`
-};
-var breakpoints2 = {
-  sm: tokens10__default.size.breakpoint.sm,
-  md: tokens10__default.size.breakpoint.md,
-  lg: tokens10__default.size.breakpoint.lg,
-  xl: tokens10__default.size.breakpoint.lg,
-  "2xl": tokens10__default.size.breakpoint.lg
-};
-
-// src/theme/foundations/config.ts
-var config2 = {
-  cssVarPrefix: "spor",
-  initialColorMode: "light",
-  useSystemColorMode: false
-};
-var fonts = {
-  body: tokens10__default.font.family.body,
-  heading: tokens10__default.font.family.heading,
-  mono: tokens10__default.font.family.monospace
-};
-var fontSizes = {
-  "2xs": tokens10__default.size.font.xs.mobile,
-  xs: tokens10__default.size.font.sm.mobile,
-  sm: tokens10__default.size.font.md.mobile,
-  md: tokens10__default.size.font.lg.mobile,
-  lg: tokens10__default.size.font.xl.mobile,
-  xl: tokens10__default.size.font.xxl.mobile,
-  "2xl": tokens10__default.size.font.xl.desktop,
-  "3xl": tokens10__default.size.font.xxl.desktop,
-  mobile: {
-    xs: tokens10__default.size.font.xs.mobile,
-    sm: tokens10__default.size.font.sm.mobile,
-    md: tokens10__default.size.font.md.mobile,
-    lg: tokens10__default.size.font.lg.mobile,
-    xl: tokens10__default.size.font.xl.mobile,
-    xxl: tokens10__default.size.font.xxl.mobile
-  },
-  desktop: {
-    xs: tokens10__default.size.font.xs.desktop,
-    sm: tokens10__default.size.font.sm.desktop,
-    md: tokens10__default.size.font.md.desktop,
-    lg: tokens10__default.size.font.lg.desktop,
-    xl: tokens10__default.size.font.xl.desktop,
-    xxl: tokens10__default.size.font.xxl.desktop
-  }
-};
-
-// src/theme/foundations/fontWeights.ts
-var fontWeights = {
-  light: 300,
-  medium: 400,
-  bold: 700
-};
-var lineHeights = {
-  normal: tokens10__default.font.style.lg["line-height"]
-};
-var radii2 = {
-  none: tokens10__default.size["border-radius"].none,
-  xs: tokens10__default.size["border-radius"].xs,
-  sm: tokens10__default.size["border-radius"].sm,
-  md: tokens10__default.size["border-radius"].md,
-  lg: tokens10__default.size["border-radius"].lg,
-  xl: tokens10__default.size["border-radius"].xl,
-  "2xl": tokens10__default.size["border-radius"]["2xl"],
-  round: "50%"
-};
-var spacing2 = Object.entries(tokens10__default.size.spacing).reduce(
-  (tokens14, [key, token]) => ({
-    ...tokens14,
-    [Number(key)]: token
-  }),
-  {}
-);
-var space2 = spacing2;
-
-// src/theme/foundations/sizes.ts
-var largeSizes2 = {
-  max: "max-content",
-  min: "min-content",
-  full: "100%",
-  "3xs": "14rem",
-  "2xs": "16rem",
-  xs: "20rem",
-  sm: "24rem",
-  md: "28rem",
-  lg: "32rem",
-  xl: "36rem",
-  "2xl": "42rem",
-  "3xl": "48rem",
-  "4xl": "56rem",
-  "5xl": "64rem",
-  "6xl": "72rem",
-  "7xl": "80rem",
-  "8xl": "90rem"
-};
-var container2 = {
-  sm: "640px",
-  md: "768px",
-  lg: "1024px",
-  xl: "1280px"
-};
-var sizes24 = {
-  ...spacing2,
-  ...largeSizes2,
-  container: container2
-};
-var textStyles = {
-  "2xl": {
-    fontSize: [
-      tokens10__default.font.style.xxl["font-size"].mobile,
-      tokens10__default.font.style.xxl["font-size"].desktop
-    ],
-    fontFamily: tokens10__default.font.style.xxl["font-family"],
-    lineHeight: tokens10__default.font.style.xxl["line-height"]
-  },
-  "xl-display": {
-    fontSize: [
-      tokens10__default.font.style["xl-display"]["font-size"].mobile,
-      tokens10__default.font.style["xl-display"]["font-size"].desktop
-    ],
-    fontFamily: tokens10__default.font.style["xl-display"]["font-family"],
-    lineHeight: tokens10__default.font.style["xl-display"]["line-height"]
-  },
-  "xl-sans": {
-    fontSize: [
-      tokens10__default.font.style["xl-sans"]["font-size"].mobile,
-      tokens10__default.font.style["xl-sans"]["font-size"].desktop
-    ],
-    fontFamily: tokens10__default.font.style["xl-sans"]["font-family"],
-    lineHeight: tokens10__default.font.style["xl-sans"]["line-height"]
-  },
-  lg: {
-    fontSize: [
-      tokens10__default.font.style.lg["font-size"].mobile,
-      tokens10__default.font.style.lg["font-size"].desktop
-    ],
-    fontFamily: tokens10__default.font.style.lg["font-family"],
-    lineHeight: tokens10__default.font.style.lg["line-height"]
-  },
-  md: {
-    fontSize: [
-      tokens10__default.font.style.md["font-size"].mobile,
-      tokens10__default.font.style.md["font-size"].desktop
-    ],
-    fontFamily: tokens10__default.font.style.md["font-family"],
-    lineHeight: tokens10__default.font.style.md["line-height"]
-  },
-  sm: {
-    fontSize: [
-      tokens10__default.font.style.sm["font-size"].mobile,
-      tokens10__default.font.style.sm["font-size"].desktop
-    ],
-    fontFamily: tokens10__default.font.style.sm["font-family"],
-    lineHeight: tokens10__default.font.style.sm["line-height"]
-  },
-  xs: {
-    fontSize: [
-      tokens10__default.font.style.xs["font-size"].mobile,
-      tokens10__default.font.style.xs["font-size"].desktop
-    ],
-    fontFamily: tokens10__default.font.style.xs["font-family"],
-    lineHeight: tokens10__default.font.style.xs["line-height"]
-  }
-};
-var zIndices2 = {
-  hide: tokens10__default.depth["z-index"].hide,
-  auto: "auto",
-  base: tokens10__default.depth["z-index"].base,
-  docked: tokens10__default.depth["z-index"].docked,
-  dropdown: tokens10__default.depth["z-index"].dropdown,
-  sticky: tokens10__default.depth["z-index"].sticky,
-  banner: tokens10__default.depth["z-index"].banner,
-  overlay: tokens10__default.depth["z-index"].overlay,
-  modal: tokens10__default.depth["z-index"].modal,
-  popover: tokens10__default.depth["z-index"].popover,
-  skipLink: tokens10__default.depth["z-index"].skipLink,
-  toast: tokens10__default.depth["z-index"].toast,
-  tooltip: tokens10__default.depth["z-index"].tooltip
-};
-
 // src/theme/components/accordion.ts
 var helpers = createMultiStyleConfigHelpers(accordionAnatomy.keys);
 var config3 = helpers.defineMultiStyleConfig({
@@ -11881,11 +11849,11 @@ var config10 = helpers5.defineMultiStyleConfig({
   }
 });
 var choice_chip_default = config10;
-var $size5 = cssVar$1("close-button-size");
+var $size6 = cssVar$1("close-button-size");
 var config11 = defineStyleConfig$1({
   baseStyle: {
-    w: [$size5.reference],
-    h: [$size5.reference],
+    w: [$size6.reference],
+    h: [$size6.reference],
     transitionProperty: "common",
     transitionDuration: "normal",
     borderRadius: "xs",
@@ -11913,15 +11881,15 @@ var config11 = defineStyleConfig$1({
   },
   sizes: {
     lg: {
-      [$size5.variable]: "40px",
+      [$size6.variable]: "40px",
       fontSize: "16px"
     },
     md: {
-      [$size5.variable]: "32px",
+      [$size6.variable]: "32px",
       fontSize: "12px"
     },
     sm: {
-      [$size5.variable]: "24px",
+      [$size6.variable]: "24px",
       fontSize: "10px"
     }
   },
@@ -11973,7 +11941,7 @@ var config13 = helpers6.defineMultiStyleConfig({
           borderColor: mode("darkGrey", "white")(props),
           borderWidth: 2
         }),
-        zIndex: zIndices2.docked
+        zIndex: zIndices.docked
       },
       _focusWithin: {
         boxShadow: getBoxShadowString({
@@ -13789,9 +13757,9 @@ var getActiveStyles = (props) => {
   }
 };
 var $width2 = cssVar$1("switch-track-width");
-var $height2 = cssVar$1("switch-track-height");
+var $height3 = cssVar$1("switch-track-height");
 var $diff2 = cssVar$1("switch-track-diff");
-var diffValue2 = calc$1.subtract($width2, $height2);
+var diffValue2 = calc$1.subtract($width2, $height3);
 var $translateX2 = cssVar$1("switch-thumb-x");
 var helpers22 = createMultiStyleConfigHelpers$1(switchAnatomy.keys);
 var config32 = helpers22.defineMultiStyleConfig({
@@ -13805,7 +13773,7 @@ var config32 = helpers22.defineMultiStyleConfig({
     },
     track: {
       width: [$width2.reference],
-      height: [$height2.reference],
+      height: [$height3.reference],
       transitionProperty: "common",
       transitionDuration: "fast",
       _disabled: {
@@ -13816,8 +13784,8 @@ var config32 = helpers22.defineMultiStyleConfig({
       transitionProperty: "transform",
       transitionDuration: "normal",
       borderRadius: "50%",
-      width: [$height2.reference],
-      height: [$height2.reference],
+      width: [$height3.reference],
+      height: [$height3.reference],
       _checked: {
         transform: `translateX(${$translateX2.reference})`
       }
@@ -13968,7 +13936,7 @@ var config32 = helpers22.defineMultiStyleConfig({
     sm: {
       container: {
         [$width2.variable]: "54px",
-        [$height2.variable]: "24px"
+        [$height3.variable]: "24px"
       },
       track: {
         borderRadius: "24px",
@@ -13978,7 +13946,7 @@ var config32 = helpers22.defineMultiStyleConfig({
     md: {
       container: {
         [$width2.variable]: "66px",
-        [$height2.variable]: "30px"
+        [$height3.variable]: "30px"
       },
       track: {
         borderRadius: "30px",
@@ -13988,7 +13956,7 @@ var config32 = helpers22.defineMultiStyleConfig({
     lg: {
       container: {
         [$width2.variable]: "78px",
-        [$height2.variable]: "36px"
+        [$height3.variable]: "36px"
       },
       track: {
         borderRadius: "36px",
@@ -14429,9 +14397,17 @@ var config35 = defineStyleConfig$1({
   baseStyle: (props) => ({
     ...input_default.baseStyle(props).field,
     minHeight: "5rem",
-    py: 3,
     verticalAlign: "top",
-    appearance: "none"
+    appearance: "none",
+    paddingTop: 2,
+    "&:not(:placeholder-shown)": {
+      "&:has(+ label)": {
+        paddingTop: 4
+      },
+      "& + label": {
+        transform: "scale(0.825) translateY(-10px)"
+      }
+    }
   })
 });
 var textarea_default = config35;