@vygruppen/spor-react 3.0.3 → 3.1.0

package/dist/{chunk-B2RY6AU2.mjs → chunk-V6MFUVYF.mjs}

@@ -1,16 +1,16 @@
-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, useFormControlContext, useMultiStyleConfig, chakra, Flex, Checkbox as Checkbox$1, useCheckbox, FormControl as FormControl$1, FormLabel, InputGroup, 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, useBreakpointValue, Popover, PopoverAnchor, Portal, PopoverContent, PopoverArrow, PopoverBody, 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, useContext, useCallback, useMemo } from 'react';
-import { CloseFill30Icon, CloseFill24Icon, CloseFill18Icon, CloseOutline24Icon, SearchOutline24Icon, InformationFill24Icon, InformationFill18Icon, WarningFill24Icon, WarningFill18Icon, ErrorFill24Icon, ErrorFill18Icon, LinkOutOutline24Icon, CalendarOutline24Icon, DropdownLeftFill24Icon, DropdownRightFill24Icon, DropdownDownFill18Icon, DropdownDownFill24Icon, DropdownUpFill24Icon, ArrowRightFill18Icon, DropdownRightFill18Icon, ErrorOutline24Icon, AltTransportOutline24Icon, WarningOutline24Icon, SuccessOutline24Icon, InformationOutline24Icon, ArrowLeftOutline24Icon, ArrowRightOutline24Icon, 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 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 { inlineLoaderColorData, spinnerColorData, contentLoaderData, fullScreenLoaderWhiteData, inlineLoaderDarkData, spinnerDarkData, fullScreenLoaderBlackData, inlineLoaderLightData, spinnerLightData } from '@vygruppen/spor-loader';
 import { useLottie } from 'lottie-react';
-import { usePopover, Overlay, DismissButton, useOverlayTrigger, useButton, useProgressBar, useDatePicker, I18nProvider, useDateRangePicker, useDialog, useFilter, useComboBox, useListBox, useOption, useListBoxSection, useSelect, HiddenSelect, useCalendar, useDateField, useRangeCalendar, useTimeField, useCalendarGrid, useDateSegment, useCalendarCell } from 'react-aria';
+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 { motion } from 'framer-motion';
-import { DateFormatter, parseTime, createCalendar, Time, toCalendarDate, toCalendarDateTime, toCalendar, getMinimumDayInMonth, getMinimumMonthInYear, today, startOfWeek, startOfMonth, endOfWeek, endOfMonth, isSameDay, getDayOfWeek, maxDate, minDate, isEqualDay, getWeeksInMonth, getLocalTimeZone, GregorianCalendar, now, startOfYear, isSameMonth, isToday } from '@internationalized/date';
+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';
 import { useOverlayTriggerState, Item, useTimeFieldState, useComboBoxState, useSelectState } from 'react-stately';
 export { Item, Section } from 'react-stately';
@@ -1533,26 +1533,30 @@ var Card = forwardRef(
 );
 function $458b0a5536c1a7cf$export$40bfa8c7b0832715(value, defaultValue, onChange) {
   let [stateValue, setStateValue] = (useState)(value || defaultValue);
-  let ref = (useRef)(value !== void 0);
-  let wasControlled = ref.current;
+  let isControlledRef = (useRef)(value !== void 0);
   let isControlled = value !== void 0;
-  let stateRef = (useRef)(stateValue);
-  if (wasControlled !== isControlled)
-    console.warn(`WARN: A component changed from ${wasControlled ? "controlled" : "uncontrolled"} to ${isControlled ? "controlled" : "uncontrolled"}.`);
-  ref.current = isControlled;
+  (useEffect)(() => {
+    let wasControlled = isControlledRef.current;
+    if (wasControlled !== isControlled)
+      console.warn(`WARN: A component changed from ${wasControlled ? "controlled" : "uncontrolled"} to ${isControlled ? "controlled" : "uncontrolled"}.`);
+    isControlledRef.current = isControlled;
+  }, [
+    isControlled
+  ]);
+  let currentValue = isControlled ? value : stateValue;
   let setValue = (useCallback)((value2, ...args) => {
     let onChangeCaller = (value3, ...onChangeArgs) => {
       if (onChange) {
-        if (!Object.is(stateRef.current, value3))
+        if (!Object.is(currentValue, value3))
           onChange(value3, ...onChangeArgs);
       }
       if (!isControlled)
-        stateRef.current = value3;
+        currentValue = value3;
     };
     if (typeof value2 === "function") {
       console.warn("We can not support a function callback. See Github Issues for details https://github.com/adobe/react-spectrum/issues/2320");
       let updateFunction = (oldValue, ...functionArgs) => {
-        let interceptedValue = value2(isControlled ? stateRef.current : oldValue, ...functionArgs);
+        let interceptedValue = value2(isControlled ? currentValue : oldValue, ...functionArgs);
         onChangeCaller(interceptedValue, ...args);
         if (!isControlled)
           return interceptedValue;
@@ -1566,14 +1570,11 @@ function $458b0a5536c1a7cf$export$40bfa8c7b0832715(value, defaultValue, onChange
     }
   }, [
     isControlled,
+    currentValue,
     onChange
   ]);
-  if (isControlled)
-    stateRef.current = value;
-  else
-    value = stateValue;
   return [
-    value,
+    currentValue,
     setValue
   ];
 }
@@ -1581,18 +1582,28 @@ function $458b0a5536c1a7cf$export$40bfa8c7b0832715(value, defaultValue, onChange
 // ../../node_modules/@react-stately/overlays/dist/import.mjs
 function $fc909762b330b746$export$61c6a8c84e605fb6(props) {
   let [isOpen, setOpen] = ($458b0a5536c1a7cf$export$40bfa8c7b0832715)(props.isOpen, props.defaultOpen || false, props.onOpenChange);
+  const open = (useCallback)(() => {
+    setOpen(true);
+  }, [
+    setOpen
+  ]);
+  const close = (useCallback)(() => {
+    setOpen(false);
+  }, [
+    setOpen
+  ]);
+  const toggle = (useCallback)(() => {
+    setOpen(!isOpen);
+  }, [
+    setOpen,
+    isOpen
+  ]);
   return {
     isOpen,
     setOpen,
-    open() {
-      setOpen(true);
-    },
-    close() {
-      setOpen(false);
-    },
-    toggle() {
-      setOpen(!isOpen);
-    }
+    open,
+    close,
+    toggle
   };
 }
 
@@ -1647,9 +1658,18 @@ var $35a22f14a1f04b11$var$DEFAULT_FIELD_OPTIONS = {
   minute: "2-digit",
   second: "2-digit"
 };
+var $35a22f14a1f04b11$var$TWO_DIGIT_FIELD_OPTIONS = {
+  year: "numeric",
+  month: "2-digit",
+  day: "2-digit",
+  hour: "2-digit",
+  minute: "2-digit",
+  second: "2-digit"
+};
 function $35a22f14a1f04b11$export$7e319ea407e63bc0(fieldOptions, options) {
+  let defaultFieldOptions = options.shouldForceLeadingZeros ? $35a22f14a1f04b11$var$TWO_DIGIT_FIELD_OPTIONS : $35a22f14a1f04b11$var$DEFAULT_FIELD_OPTIONS;
   fieldOptions = {
-    ...$35a22f14a1f04b11$var$DEFAULT_FIELD_OPTIONS,
+    ...defaultFieldOptions,
     ...fieldOptions
   };
   let granularity = options.granularity || "minute";
@@ -1705,17 +1725,25 @@ function $35a22f14a1f04b11$export$66aa2b09de4b1ea5(placeholderValue, granularity
   return date;
 }
 function $35a22f14a1f04b11$export$2440da353cedad43(v, granularity) {
-  let lastValue = (useRef)(v);
-  if (v)
-    lastValue.current = v;
-  v = lastValue.current;
   let defaultTimeZone = v && "timeZone" in v ? v.timeZone : void 0;
-  granularity = granularity || (v && "minute" in v ? "minute" : "day");
-  if (v && !(granularity in v))
+  let defaultGranularity = v && "minute" in v ? "minute" : "day";
+  if (v && granularity && !(granularity in v))
     throw new Error("Invalid granularity " + granularity + " for value " + v.toString());
+  let [lastValue, setLastValue] = (useState)([
+    defaultGranularity,
+    defaultTimeZone
+  ]);
+  if (v && (lastValue[0] !== defaultGranularity || lastValue[1] !== defaultTimeZone))
+    setLastValue([
+      defaultGranularity,
+      defaultTimeZone
+    ]);
+  if (!granularity)
+    granularity = v ? defaultGranularity : lastValue[0];
+  let timeZone = v ? defaultTimeZone : lastValue[1];
   return [
     granularity,
-    defaultTimeZone
+    timeZone
   ];
 }
 function $ab5bf3f618090389$export$87194bb378cc3ac2(props) {
@@ -1755,7 +1783,7 @@ function $ab5bf3f618090389$export$87194bb378cc3ac2(props) {
       overlayState.setOpen(false);
   };
   let selectTime = (newValue) => {
-    if (selectedDate)
+    if (selectedDate && newValue)
       commitValue(selectedDate, newValue);
     else
       setSelectedTime(newValue);
@@ -2226,11 +2254,13 @@ function $3c0fc76039f1c516$export$60e84778edff6d26(props) {
     timeZone: defaultTimeZone,
     hideTimeZone,
     hourCycle: props.hourCycle,
-    showEra
+    showEra,
+    shouldForceLeadingZeros: props.shouldForceLeadingZeros
   }), [
     props.maxGranularity,
     granularity,
     props.hourCycle,
+    props.shouldForceLeadingZeros,
     defaultTimeZone,
     hideTimeZone,
     showEra
@@ -2535,11 +2565,11 @@ function $3c0fc76039f1c516$var$setSegment(value, part, segmentValue, options) {
       }
       case "hour":
         if (options.hour12) {
-          let hours1 = value.hour;
-          let wasPM1 = hours1 >= 12;
-          if (!wasPM1 && segmentValue === 12)
+          let hours = value.hour;
+          let wasPM = hours >= 12;
+          if (!wasPM && segmentValue === 12)
             segmentValue = 0;
-          if (wasPM1 && segmentValue < 12)
+          if (wasPM && segmentValue < 12)
             segmentValue += 12;
         }
       case "minute":
@@ -2684,11 +2714,11 @@ function $93c38a5e28be6249$export$e50a61c1de9f574(props) {
           }
           let start = "";
           let end = "";
-          for (let i1 = 0; i1 < parts14.length; i1++) {
-            if (i1 < separatorIndex)
-              start += parts14[i1].value;
-            else if (i1 > separatorIndex)
-              end += parts14[i1].value;
+          for (let i = 0; i < parts14.length; i++) {
+            if (i < separatorIndex)
+              start += parts14[i].value;
+            else if (i > separatorIndex)
+              end += parts14[i].value;
           }
           return {
             start,
@@ -2784,7 +2814,7 @@ function $131cf43a05231e1e$export$6d095e787d2b5e1f(props) {
   ]);
   let { locale, createCalendar: createCalendar4, visibleDuration = {
     months: 1
-  }, minValue, maxValue, selectionAlignment, isDateUnavailable } = props;
+  }, minValue, maxValue, selectionAlignment, isDateUnavailable, pageBehavior = "visible" } = props;
   let calendar = (useMemo)(() => createCalendar4(resolvedOptions.calendar), [
     createCalendar4,
     resolvedOptions.calendar
@@ -2838,12 +2868,12 @@ function $131cf43a05231e1e$export$6d095e787d2b5e1f(props) {
     startDate,
     visibleDuration
   ]);
-  let lastCalendarIdentifier = (useRef)(calendar.identifier);
-  if (calendar.identifier !== lastCalendarIdentifier.current) {
+  let [lastCalendarIdentifier, setLastCalendarIdentifier] = (useState)(calendar.identifier);
+  if (calendar.identifier !== lastCalendarIdentifier) {
     let newFocusedDate = (toCalendar)(focusedDate, calendar);
     setStartDate(($f62d864046160412$export$f4a51ff076cc9a09)(newFocusedDate, visibleDuration, locale, minValue, maxValue));
     setFocusedDate(newFocusedDate);
-    lastCalendarIdentifier.current = calendar.identifier;
+    setLastCalendarIdentifier(calendar.identifier);
   }
   if (($f62d864046160412$export$eac50920cf2fd59a)(focusedDate, minValue, maxValue))
     setFocusedDate(($f62d864046160412$export$4f5203c0d889109e)(focusedDate, minValue, maxValue));
@@ -2881,6 +2911,14 @@ function $131cf43a05231e1e$export$6d095e787d2b5e1f(props) {
     maxValue
   ]);
   let validationState = props.validationState || (isUnavailable ? "invalid" : null);
+  let pageDuration = (useMemo)(() => {
+    if (pageBehavior === "visible")
+      return visibleDuration;
+    return $131cf43a05231e1e$var$unitDuration(visibleDuration);
+  }, [
+    pageBehavior,
+    visibleDuration
+  ]);
   return {
     isDisabled: props.isDisabled,
     isReadOnly: props.isReadOnly,
@@ -2926,14 +2964,14 @@ function $131cf43a05231e1e$export$6d095e787d2b5e1f(props) {
         }));
     },
     focusNextPage() {
-      let start = startDate.add(visibleDuration);
-      setFocusedDate(($f62d864046160412$export$4f5203c0d889109e)(focusedDate.add(visibleDuration), minValue, maxValue));
-      setStartDate(($f62d864046160412$export$144a00ba6044eb9)(($f62d864046160412$export$5bb865b12696a77d)(focusedDate, start, visibleDuration, locale, minValue, maxValue), visibleDuration, locale));
+      let start = startDate.add(pageDuration);
+      setFocusedDate(($f62d864046160412$export$4f5203c0d889109e)(focusedDate.add(pageDuration), minValue, maxValue));
+      setStartDate(($f62d864046160412$export$144a00ba6044eb9)(($f62d864046160412$export$5bb865b12696a77d)(focusedDate, start, pageDuration, locale, minValue, maxValue), pageDuration, locale));
     },
     focusPreviousPage() {
-      let start = startDate.subtract(visibleDuration);
-      setFocusedDate(($f62d864046160412$export$4f5203c0d889109e)(focusedDate.subtract(visibleDuration), minValue, maxValue));
-      setStartDate(($f62d864046160412$export$144a00ba6044eb9)(($f62d864046160412$export$5bb865b12696a77d)(focusedDate, start, visibleDuration, locale, minValue, maxValue), visibleDuration, locale));
+      let start = startDate.subtract(pageDuration);
+      setFocusedDate(($f62d864046160412$export$4f5203c0d889109e)(focusedDate.subtract(pageDuration), minValue, maxValue));
+      setStartDate(($f62d864046160412$export$144a00ba6044eb9)(($f62d864046160412$export$5bb865b12696a77d)(focusedDate, start, pageDuration, locale, minValue, maxValue), pageDuration, locale));
     },
     focusSectionStart() {
       if (visibleDuration.days)
@@ -3101,10 +3139,10 @@ function $9a36b6ba2fb1a7c5$export$9a987164d97ecc90(props) {
       setAvailableRange(null);
     }
   };
-  let lastVisibleRange = (useRef)(calendar.visibleRange);
-  if (!(isEqualDay)(calendar.visibleRange.start, lastVisibleRange.current.start) || !(isEqualDay)(calendar.visibleRange.end, lastVisibleRange.current.end)) {
+  let [lastVisibleRange, setLastVisibleRange] = (useState)(calendar.visibleRange);
+  if (!(isEqualDay)(calendar.visibleRange.start, lastVisibleRange.start) || !(isEqualDay)(calendar.visibleRange.end, lastVisibleRange.end)) {
     updateAvailableRange(anchorDate);
-    lastVisibleRange.current = calendar.visibleRange;
+    setLastVisibleRange(calendar.visibleRange);
   }
   let setAnchorDate = (date) => {
     if (date) {
@@ -3526,37 +3564,44 @@ var texts8 = createTexts({
     en: "Open calendar"
   }
 });
-var DateTimeSegment = ({ segment, state: state2 }) => {
-  const ref = useRef(null);
-  const { segmentProps } = useDateSegment(segment, state2, ref);
-  const styles2 = useMultiStyleConfig("Datepicker", {
-    isPlaceholder: segment.isPlaceholder,
-    isEditable: segment.isEditable
-  });
-  return /* @__PURE__ */ React49__default.createElement(
-    Box,
-    {
-      ...segmentProps,
-      ref,
-      style: {
-        ...segmentProps.style,
-        fontVariantNumeric: "tabular-nums",
-        boxSizing: "content-box"
+var DateTimeSegment = forwardRef$1(
+  ({ segment, state: state2 }, externalRef) => {
+    const internalRef = useRef(null);
+    const ref = externalRef ?? internalRef;
+    const { segmentProps } = useDateSegment(
+      segment,
+      state2,
+      ref
+    );
+    const styles2 = useMultiStyleConfig("Datepicker", {
+      isPlaceholder: segment.isPlaceholder,
+      isEditable: segment.isEditable
+    });
+    return /* @__PURE__ */ React49__default.createElement(
+      Box,
+      {
+        ...segmentProps,
+        ref,
+        style: {
+          ...segmentProps.style,
+          fontVariantNumeric: "tabular-nums",
+          boxSizing: "content-box"
+        },
+        paddingX: "1px",
+        textAlign: "end",
+        outline: "none",
+        borderRadius: "xs",
+        fontSize: "mobile.md",
+        sx: styles2.dateTimeSegment,
+        _focus: {
+          backgroundColor: "darkTeal",
+          color: "white"
+        }
       },
-      paddingX: "1px",
-      textAlign: "end",
-      outline: "none",
-      borderRadius: "xs",
-      fontSize: "mobile.md",
-      sx: styles2.dateTimeSegment,
-      _focus: {
-        backgroundColor: "darkTeal",
-        color: "white"
-      }
-    },
-    isPaddable(segment.type) ? segment.text.padStart(2, "0") : segment.text
-  );
-};
+      isPaddable(segment.type) ? segment.text.padStart(2, "0") : segment.text
+    );
+  }
+);
 var isPaddable = (segmentType) => segmentType === "month" || segmentType === "day" || segmentType === "hour" || segmentType === "minute" || segmentType === "second";
 
 // src/datepicker/DateField.tsx
@@ -3568,19 +3613,49 @@ function createCalendar2(identifier) {
       throw new Error(`Unsupported calendar ${identifier}`);
   }
 }
-function DateField(props) {
-  var _a6;
-  const locale = useCurrentLocale();
-  const styles2 = useMultiStyleConfig("Datepicker", {});
-  const state2 = $3c0fc76039f1c516$export$60e84778edff6d26({
-    ...props,
-    locale,
-    createCalendar: createCalendar2
-  });
-  const ref = useRef(null);
-  const { fieldProps, labelProps } = useDateField(props, state2, ref);
-  return /* @__PURE__ */ React49__default.createElement(Box, { minWidth: "6rem", width: "100%" }, props.label && /* @__PURE__ */ React49__default.createElement(FormLabel, { ...props.labelProps, ...labelProps, sx: styles2.inputLabel }, props.label), /* @__PURE__ */ React49__default.createElement(Flex, { ...fieldProps, ref }, state2.segments.map((segment, i) => /* @__PURE__ */ React49__default.createElement(DateTimeSegment, { key: i, segment, state: state2 }))), /* @__PURE__ */ React49__default.createElement("input", { type: "hidden", value: (_a6 = state2.value) == null ? void 0 : _a6.toString(), name: props.name }));
-}
+var DateField = forwardRef$1(
+  (props, externalRef) => {
+    var _a6;
+    const locale = useCurrentLocale();
+    const styles2 = useMultiStyleConfig("Datepicker", {});
+    const state2 = $3c0fc76039f1c516$export$60e84778edff6d26({
+      ...props,
+      locale,
+      createCalendar: createCalendar2
+    });
+    const internalRef = useRef(null);
+    const ref = externalRef ?? internalRef;
+    const { fieldProps, labelProps } = useDateField(
+      props,
+      state2,
+      ref
+    );
+    return /* @__PURE__ */ React49__default.createElement(Box, { minWidth: "6rem", width: "100%" }, props.label && /* @__PURE__ */ React49__default.createElement(
+      FormLabel,
+      {
+        ...props.labelProps,
+        ...labelProps,
+        sx: styles2.inputLabel
+      },
+      props.label
+    ), /* @__PURE__ */ React49__default.createElement(Flex, { ...fieldProps }, state2.segments.map((segment, i) => /* @__PURE__ */ React49__default.createElement(
+      DateTimeSegment,
+      {
+        ref: i === 0 ? ref : void 0,
+        key: i,
+        segment,
+        state: state2
+      }
+    ))), /* @__PURE__ */ React49__default.createElement(
+      "input",
+      {
+        type: "hidden",
+        value: (_a6 = state2.value) == null ? void 0 : _a6.toString(),
+        name: props.name
+      }
+    ));
+  }
+);
 var StyledField = forwardRef(
   ({ children, variant, ...otherProps }, ref) => {
     const { isInvalid } = useFormControlContext() ?? {
@@ -3601,106 +3676,114 @@ var StyledField = forwardRef(
 );
 
 // src/datepicker/DatePicker.tsx
-function DatePicker({
-  variant,
-  errorMessage,
-  minHeight,
-  showYearNavigation,
-  width = "auto",
-  ...props
-}) {
-  const formControlProps = useFormControlContext();
-  const state2 = $ab5bf3f618090389$export$87194bb378cc3ac2({
-    ...props,
-    shouldCloseOnSelect: true,
+var DatePicker = forwardRef$1(
+  ({
+    variant,
     errorMessage,
-    isRequired: props.isRequired ?? (formControlProps == null ? void 0 : formControlProps.isRequired),
-    validationState: (formControlProps == null ? void 0 : formControlProps.isInvalid) ? "invalid" : "valid"
-  });
-  const ref = useRef(null);
-  const {
-    groupProps,
-    labelProps,
-    fieldProps,
-    buttonProps,
-    dialogProps,
-    calendarProps,
-    errorMessageProps
-  } = useDatePicker(props, state2, ref);
-  const responsiveVariant = useBreakpointValue(typeof variant === "string" ? [variant] : variant) ?? "simple";
-  const locale = useCurrentLocale();
-  const handleEnterClick = (e) => {
-    if (responsiveVariant === "simple" && e.key === "Enter" && !state2.isOpen) {
-      e.stopPropagation();
-      state2.setOpen(true);
-    }
-  };
-  const onFieldClick = () => {
-    if (!hasTrigger) {
-      state2.setOpen(true);
-    }
-  };
-  const hasTrigger = responsiveVariant === "with-trigger";
-  const styles2 = useMultiStyleConfig("Datepicker", {});
-  return /* @__PURE__ */ React49__default.createElement(I18nProvider, { locale }, /* @__PURE__ */ React49__default.createElement(
-    Box,
-    {
-      position: "relative",
-      display: "inline-flex",
-      flexDirection: "column",
-      width
-    },
-    /* @__PURE__ */ React49__default.createElement(
-      Popover,
+    minHeight,
+    showYearNavigation,
+    width = "auto",
+    ...props
+  }, externalRef) => {
+    const formControlProps = useFormControlContext();
+    const state2 = $ab5bf3f618090389$export$87194bb378cc3ac2({
+      ...props,
+      shouldCloseOnSelect: true,
+      errorMessage,
+      isRequired: props.isRequired ?? (formControlProps == null ? void 0 : formControlProps.isRequired),
+      validationState: (formControlProps == null ? void 0 : formControlProps.isInvalid) ? "invalid" : "valid"
+    });
+    const internalRef = useRef(null);
+    const ref = externalRef ?? internalRef;
+    const {
+      groupProps,
+      labelProps,
+      fieldProps,
+      buttonProps,
+      dialogProps,
+      calendarProps,
+      errorMessageProps
+    } = useDatePicker(
+      props,
+      state2,
+      ref
+    );
+    const responsiveVariant = useBreakpointValue(typeof variant === "string" ? [variant] : variant) ?? "simple";
+    const locale = useCurrentLocale();
+    const handleEnterClick = (e) => {
+      if (responsiveVariant === "simple" && e.key === "Enter" && !state2.isOpen) {
+        e.stopPropagation();
+        state2.setOpen(true);
+      }
+    };
+    const onFieldClick = () => {
+      if (!hasTrigger) {
+        state2.setOpen(true);
+      }
+    };
+    const hasTrigger = responsiveVariant === "with-trigger";
+    const styles2 = useMultiStyleConfig("Datepicker", {});
+    return /* @__PURE__ */ React49__default.createElement(I18nProvider, { locale }, /* @__PURE__ */ React49__default.createElement(
+      Box,
       {
-        ...dialogProps,
-        isOpen: state2.isOpen,
-        onClose: () => state2.setOpen(false),
-        onOpen: () => state2.setOpen(true),
-        closeOnBlur: true,
-        closeOnEsc: true,
-        returnFocusOnClose: true
-      },
-      /* @__PURE__ */ React49__default.createElement(InputGroup, { ...groupProps, ref, display: "inline-flex" }, /* @__PURE__ */ React49__default.createElement(PopoverAnchor, null, /* @__PURE__ */ React49__default.createElement(
-        StyledField,
+        position: "relative",
+        display: "inline-flex",
+        flexDirection: "column",
+        width
+      },
+      /* @__PURE__ */ React49__default.createElement(
+        Popover,
         {
-          variant: responsiveVariant,
-          onClick: onFieldClick,
-          onKeyPress: handleEnterClick,
-          paddingX: 3,
-          minHeight
+          ...dialogProps,
+          isOpen: state2.isOpen,
+          onClose: state2.close,
+          onOpen: state2.open,
+          closeOnBlur: true,
+          closeOnEsc: true,
+          returnFocusOnClose: true
         },
-        !hasTrigger && /* @__PURE__ */ React49__default.createElement(CalendarOutline24Icon, { marginRight: 2, alignSelf: "center" }),
-        /* @__PURE__ */ React49__default.createElement(
-          DateField,
+        /* @__PURE__ */ React49__default.createElement(InputGroup, { ...groupProps, display: "inline-flex" }, /* @__PURE__ */ React49__default.createElement(PopoverAnchor, null, /* @__PURE__ */ React49__default.createElement(
+          StyledField,
           {
-            label: props.label,
-            labelProps,
-            name: props.name,
-            ...fieldProps
-          }
-        )
-      )), hasTrigger && /* @__PURE__ */ React49__default.createElement(CalendarTriggerButton, { ...buttonProps })),
-      /* @__PURE__ */ React49__default.createElement(FormErrorMessage, { ...errorMessageProps }, errorMessage),
-      state2.isOpen && !props.isDisabled && /* @__PURE__ */ React49__default.createElement(Portal, null, /* @__PURE__ */ React49__default.createElement(
-        PopoverContent,
-        {
-          color: "darkGrey",
-          boxShadow: "md",
-          sx: styles2.calendar
-        },
-        /* @__PURE__ */ React49__default.createElement(PopoverArrow, { sx: styles2.arrow }),
-        /* @__PURE__ */ React49__default.createElement(PopoverBody, null, /* @__PURE__ */ React49__default.createElement(
-          Calendar,
+            variant: responsiveVariant,
+            onClick: onFieldClick,
+            onKeyPress: handleEnterClick,
+            paddingX: 3,
+            minHeight
+          },
+          !hasTrigger && /* @__PURE__ */ React49__default.createElement(CalendarOutline24Icon, { marginRight: 2, alignSelf: "center" }),
+          /* @__PURE__ */ React49__default.createElement(
+            DateField,
+            {
+              label: props.label,
+              labelProps,
+              name: props.name,
+              ref,
+              ...fieldProps
+            }
+          )
+        )), hasTrigger && /* @__PURE__ */ React49__default.createElement(CalendarTriggerButton, { ...buttonProps })),
+        /* @__PURE__ */ React49__default.createElement(FormErrorMessage, { ...errorMessageProps }, errorMessage),
+        state2.isOpen && !props.isDisabled && /* @__PURE__ */ React49__default.createElement(Portal, null, /* @__PURE__ */ React49__default.createElement(
+          PopoverContent,
           {
-            ...calendarProps,
-            showYearNavigation
-          }
+            color: "darkGrey",
+            boxShadow: "md",
+            sx: styles2.calendar
+          },
+          /* @__PURE__ */ React49__default.createElement(PopoverArrow, { sx: styles2.arrow }),
+          /* @__PURE__ */ React49__default.createElement(PopoverBody, null, /* @__PURE__ */ React49__default.createElement(
+            Calendar,
+            {
+              ...calendarProps,
+              showYearNavigation
+            }
+          ))
         ))
-      ))
-    )
-  ));
-}
+      )
+    ));
+  }
+);
 function RangeCalendar(props) {
   const locale = useCurrentLocale();
   const state2 = $9a36b6ba2fb1a7c5$export$9a987164d97ecc90({
@@ -4034,7 +4117,8 @@ var Popover3 = forwardRef$1(
     crossOffset = 0,
     placement = "bottom",
     shouldFlip = false,
-    isNonModal = false
+    isNonModal = false,
+    hasBackdrop = true
   }, ref) => {
     var _a6;
     const internalRef = useRef(null);
@@ -4051,7 +4135,7 @@ var Popover3 = forwardRef$1(
       },
       state2
     );
-    return /* @__PURE__ */ React49__default.createElement(Overlay, null, /* @__PURE__ */ React49__default.createElement(Box, { ...underlayProps, position: "fixed", inset: "0" }), /* @__PURE__ */ React49__default.createElement(
+    return /* @__PURE__ */ React49__default.createElement(Overlay, null, hasBackdrop && /* @__PURE__ */ React49__default.createElement(Box, { ...underlayProps, position: "fixed", inset: "0" }), /* @__PURE__ */ React49__default.createElement(
       Box,
       {
         ...popoverProps,
@@ -4232,11 +4316,6 @@ function Combobox({
     shouldCloseOnBlur: true,
     label
   });
-  useOutsideClick({
-    ref: listBoxRef,
-    handler: state2.close,
-    enabled: true
-  });
   const {
     inputProps: { size: size2, ...inputProps },
     listBoxProps
@@ -4293,8 +4372,10 @@ function Combobox({
       state: state2,
       triggerRef: inputRef,
       ref: popoverRef,
+      isNonModal: true,
       placement: "bottom start",
-      shouldFlip: false
+      shouldFlip: false,
+      hasBackdrop: false
     },
     /* @__PURE__ */ React49__default.createElement(
       ListBox,
@@ -4940,7 +5021,7 @@ var texts13 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React49__default.lazy(() => import('./CountryCodeSelect-7ASYXAQD.mjs'));
+var LazyCountryCodeSelect = React49__default.lazy(() => import('./CountryCodeSelect-WPMTKT2L.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React49__default.createElement(Radio$1, { ...props, ref });
 });
@@ -5014,7 +5095,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 {
@@ -5837,8 +5918,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",
@@ -5866,8 +5945,6 @@ var transition = {
   duration: transitionDuration
 };
 var transition_default = transition;
-
-// ../../node_modules/@chakra-ui/theme/dist/chunk-7OKLMD4V.mjs
 var zIndices = {
   hide: -1,
   auto: "auto",
@@ -5884,8 +5961,6 @@ var zIndices = {
   tooltip: 1800
 };
 var z_index_default = zIndices;
-
-// ../../node_modules/@chakra-ui/theme/dist/chunk-ZV5E32CG.mjs
 var borders = {
   none: 0,
   "1px": "1px solid",
@@ -5894,8 +5969,6 @@ var borders = {
   "8px": "8px solid"
 };
 var borders_default = borders;
-
-// ../../node_modules/@chakra-ui/theme/dist/chunk-DDAHWWWN.mjs
 var breakpoints = {
   base: "0em",
   sm: "30em",
@@ -5905,8 +5978,6 @@ var breakpoints = {
   "2xl": "96em"
 };
 var breakpoints_default = breakpoints;
-
-// ../../node_modules/@chakra-ui/theme/dist/chunk-C7H5GWRZ.mjs
 var colors2 = {
   transparent: "transparent",
   current: "currentColor",
@@ -6130,8 +6201,6 @@ var colors2 = {
   }
 };
 var colors_default = colors2;
-
-// ../../node_modules/@chakra-ui/theme/dist/chunk-4REDROSM.mjs
 var radii = {
   none: "0",
   sm: "0.125rem",
@@ -6144,8 +6213,6 @@ var radii = {
   full: "9999px"
 };
 var radius_default = radii;
-
-// ../../node_modules/@chakra-ui/theme/dist/chunk-DJNGX4VH.mjs
 var shadows2 = {
   xs: "0 0 0 1px rgba(0, 0, 0, 0.05)",
   sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
@@ -6160,8 +6227,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",
@@ -6173,8 +6238,6 @@ var blur = {
   "3xl": "64px"
 };
 var blur_default = blur;
-
-// ../../node_modules/@chakra-ui/theme/dist/chunk-HOOF7HHD.mjs
 var typography = {
   letterSpacings: {
     tighter: "-0.05em",
@@ -6236,8 +6299,6 @@ var typography = {
   }
 };
 var typography_default = typography;
-
-// ../../node_modules/@chakra-ui/theme/dist/chunk-G3IFUAY5.mjs
 var spacing = {
   px: "1px",
   0.5: "0.125rem",
@@ -6273,8 +6334,6 @@ var spacing = {
   80: "20rem",
   96: "24rem"
 };
-
-// ../../node_modules/@chakra-ui/theme/dist/chunk-X4JBRTE2.mjs
 var largeSizes = {
   max: "max-content",
   min: "min-content",
@@ -6307,8 +6366,6 @@ var sizes = {
   container
 };
 var sizes_default = sizes;
-
-// ../../node_modules/@chakra-ui/theme/dist/chunk-VYR6F67Y.mjs
 var foundations = {
   breakpoints: breakpoints_default,
   zIndices: z_index_default,
@@ -7409,8 +7466,6 @@ function createMultiStyleConfigHelpers(parts14) {
     }
   };
 }
-
-// ../../node_modules/@chakra-ui/theme/dist/chunk-HAMNZXTQ.mjs
 var { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers([
   "stepper",
   "step",
@@ -7555,8 +7610,6 @@ var stepperTheme = defineMultiStyleConfig({
     colorScheme: "blue"
   }
 });
-
-// ../../node_modules/@chakra-ui/anatomy/dist/chunk-ZN6IUO2A.mjs
 function anatomy(name, map = {}) {
   let called = false;
   function assert() {
@@ -7619,8 +7672,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");
@@ -7640,9 +7691,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",
@@ -8246,8 +8302,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");
@@ -8369,9 +8423,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",
@@ -8386,46 +8454,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 = {
   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) {
@@ -8556,8 +8624,6 @@ var inputTheme = defineMultiStyleConfig6({
     variant: "outline"
   }
 });
-
-// ../../node_modules/@chakra-ui/theme/dist/chunk-OIGZPHLT.mjs
 var _a;
 var baseStyle8 = defineStyle({
   ...(_a = inputTheme.baseStyle) == null ? void 0 : _a.field,
@@ -8702,8 +8768,6 @@ var progressTheme = defineMultiStyleConfig7({
     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;
@@ -8794,8 +8858,6 @@ var checkboxTheme = defineMultiStyleConfig8({
     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;
@@ -8847,8 +8909,6 @@ var radioTheme = defineMultiStyleConfig9({
     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;
@@ -8931,8 +8991,6 @@ var selectTheme = defineMultiStyleConfig10({
   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({
@@ -8950,8 +9008,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",
@@ -9139,8 +9195,6 @@ var spinnerTheme = defineStyleConfig({
     size: "md"
   }
 });
-
-// ../../node_modules/@chakra-ui/theme/dist/chunk-EY6ACYQS.mjs
 var { defineMultiStyleConfig: defineMultiStyleConfig12, definePartsStyle: definePartsStyle12 } = createMultiStyleConfigHelpers(statAnatomy.keys);
 var baseStyleLabel4 = defineStyle({
   fontWeight: "medium"
@@ -9180,8 +9234,6 @@ var statTheme = defineMultiStyleConfig12({
     size: "md"
   }
 });
-
-// ../../node_modules/@chakra-ui/theme/dist/chunk-VQ2DUS6J.mjs
 var $bg8 = cssVar("kbd-bg");
 var baseStyle19 = defineStyle({
   [$bg8.variable]: "colors.gray.100",
@@ -9201,8 +9253,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",
@@ -9221,8 +9271,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",
@@ -9235,8 +9283,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");
@@ -9292,6 +9338,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
 });
@@ -9311,14 +9363,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");
@@ -9515,8 +9566,6 @@ var numberInputTheme = defineMultiStyleConfig16({
   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,
@@ -9634,8 +9683,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");
@@ -9720,8 +9767,6 @@ var drawerTheme = defineMultiStyleConfig18({
     size: "xs"
   }
 });
-
-// ../../node_modules/@chakra-ui/theme/dist/chunk-YZVOF4MP.mjs
 var { definePartsStyle: definePartsStyle19, defineMultiStyleConfig: defineMultiStyleConfig19 } = createMultiStyleConfigHelpers(editableAnatomy.keys);
 var baseStylePreview = defineStyle({
   borderRadius: "md",
@@ -9755,8 +9800,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({
@@ -9788,8 +9831,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({
@@ -9802,7 +9843,7 @@ var baseStyleText = defineStyle({
   fontSize: "sm",
   lineHeight: "normal"
 });
-var baseStyleIcon5 = defineStyle({
+var baseStyleIcon6 = defineStyle({
   marginEnd: "0.5em",
   [$fg5.variable]: `colors.red.500`,
   _dark: {
@@ -9812,13 +9853,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",
@@ -9834,8 +9873,6 @@ var baseStyle31 = defineStyle({
 var formLabelTheme = defineStyleConfig({
   baseStyle: baseStyle31
 });
-
-// ../../node_modules/@chakra-ui/theme/dist/chunk-X4O3JXYB.mjs
 var baseStyle32 = defineStyle({
   fontFamily: "heading",
   fontWeight: "bold"
@@ -9881,8 +9918,6 @@ var headingTheme = defineStyleConfig({
     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({
@@ -9933,7 +9968,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)
       },
@@ -9985,6 +10020,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: {
@@ -10083,11 +10119,9 @@ var buttonTheme = defineStyleConfig({
     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");
@@ -10103,33 +10137,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 = {
   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"
     }
   })
 };
@@ -10155,13 +10189,13 @@ var variants9 = {
   }),
   unstyled: {
     body: {
-      [$padding.variable]: 0
+      [$padding2.variable]: 0
     },
     header: {
-      [$padding.variable]: 0
+      [$padding2.variable]: 0
     },
     footer: {
-      [$padding.variable]: 0
+      [$padding2.variable]: 0
     }
   }
 };
@@ -10225,8 +10259,6 @@ var closeButtonTheme = defineStyleConfig({
     size: "md"
   }
 });
-
-// ../../node_modules/@chakra-ui/theme/dist/chunk-CAKKPKRW.mjs
 var { variants: variants10, defaultProps } = badgeTheme;
 var baseStyle37 = defineStyle({
   fontFamily: "mono",
@@ -10242,8 +10274,6 @@ var codeTheme = defineStyleConfig({
   variants: variants10,
   defaultProps
 });
-
-// ../../node_modules/@chakra-ui/theme/dist/chunk-NDGGJV23.mjs
 var baseStyle38 = defineStyle({
   w: "100%",
   mx: "auto",
@@ -10253,8 +10283,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"
@@ -10276,8 +10304,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",
@@ -10308,14 +10334,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);
@@ -10437,23 +10463,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";
@@ -10462,39 +10493,42 @@ 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)`
     }
   });
 }
@@ -10511,10 +10545,10 @@ var sizes23 = {
 var avatarTheme = defineMultiStyleConfig26({
   baseStyle: baseStyle42,
   sizes: sizes23,
-  defaultProps: { size: "md" }
+  defaultProps: {
+    size: "md"
+  }
 });
-
-// ../../node_modules/@chakra-ui/theme/dist/chunk-64X4WVHB.mjs
 var components = {
   Accordion: accordionTheme,
   Alert: alertTheme,
@@ -10559,8 +10593,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" },
@@ -10572,8 +10604,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: {
@@ -10592,8 +10622,6 @@ var styles = {
     }
   }
 };
-
-// ../../node_modules/@chakra-ui/theme/dist/index.mjs
 var direction = "ltr";
 var config = {
   useSystemColorMode: false,
@@ -11796,11 +11824,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",
@@ -11828,15 +11856,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"
     }
   },
@@ -13704,9 +13732,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({
@@ -13720,7 +13748,7 @@ var config32 = helpers22.defineMultiStyleConfig({
     },
     track: {
       width: [$width2.reference],
-      height: [$height2.reference],
+      height: [$height3.reference],
       transitionProperty: "common",
       transitionDuration: "fast",
       _disabled: {
@@ -13731,8 +13759,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})`
       }
@@ -13883,7 +13911,7 @@ var config32 = helpers22.defineMultiStyleConfig({
     sm: {
       container: {
         [$width2.variable]: "54px",
-        [$height2.variable]: "24px"
+        [$height3.variable]: "24px"
       },
       track: {
         borderRadius: "24px",
@@ -13893,7 +13921,7 @@ var config32 = helpers22.defineMultiStyleConfig({
     md: {
       container: {
         [$width2.variable]: "66px",
-        [$height2.variable]: "30px"
+        [$height3.variable]: "30px"
       },
       track: {
         borderRadius: "30px",
@@ -13903,7 +13931,7 @@ var config32 = helpers22.defineMultiStyleConfig({
     lg: {
       container: {
         [$width2.variable]: "78px",
-        [$height2.variable]: "36px"
+        [$height3.variable]: "36px"
       },
       track: {
         borderRadius: "36px",
@@ -14344,9 +14372,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;