@vygruppen/spor-react 2.3.4 → 2.4.0

package/dist/{chunk-QXVLVC2K.mjs → chunk-D5OFVN6X.mjs}

@@ -1,19 +1,19 @@
-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, useFormControl, useColorModeValue, useFormControlProps, 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, 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, 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, useRef, useState, useEffect, useId, Suspense, useCallback, useContext, useMemo } 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 { inlineLoaderColorData, spinnerColorData, contentLoaderData, fullScreenLoaderWhiteData, inlineLoaderDarkData, spinnerDarkData, fullScreenLoaderBlackData, inlineLoaderLightData, spinnerLightData } from '@vygruppen/spor-loader';
 import { useLottie } from 'lottie-react';
-import { useOverlayTrigger, useButton, useListBox, useOption, useProgressBar, useDatePicker, I18nProvider, useDateRangePicker, useDialog, usePopover, Overlay, DismissButton, useSelect, HiddenSelect, useCalendar, useDateField, useRangeCalendar, useTimeField, useCalendarGrid, useDateSegment, useCalendarCell } from 'react-aria';
+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 { 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';
 export { Time } from '@internationalized/date';
-import { useOverlayTriggerState, Item, useTimeFieldState, useSelectState } from 'react-stately';
-export { Item } from 'react-stately';
+import { useOverlayTriggerState, useTimeFieldState, useAsyncList, useComboBoxState, Item, useSelectState } from 'react-stately';
+export { Item, Section } from 'react-stately';
 import { useSwipeable } from 'react-swipeable';
 import { Global, keyframes } from '@emotion/react';
 import { cssVar as cssVar$1, calc as calc$1, mode, getColor, anatomy as anatomy$1, orient, transparentize, generateStripe, randomColor, isDark } from '@chakra-ui/theme-tools';
@@ -950,7 +950,7 @@ var DarkSpinner = ({
   maxWidth,
   ...props
 }) => {
-  return /* @__PURE__ */ React49__default.createElement(Center, { flexDirection: "column", ...props }, /* @__PURE__ */ React49__default.createElement(Box, { width, maxWidth }, /* @__PURE__ */ React49__default.createElement(ClientOnly, null, () => /* @__PURE__ */ React49__default.createElement(Lottie, { animationData: spinnerDarkData }))), children && /* @__PURE__ */ React49__default.createElement(Box, { mt: 3, fontWeight: "bold" }, children));
+  return /* @__PURE__ */ React49__default.createElement(Center, { flexDirection: "column", ...props }, /* @__PURE__ */ React49__default.createElement(Box, { width, maxWidth }, /* @__PURE__ */ React49__default.createElement(ClientOnly, null, () => /* @__PURE__ */ React49__default.createElement(Lottie, { animationData: spinnerDarkData }))), children && /* @__PURE__ */ React49__default.createElement(Box, { marginTop: 3, fontWeight: "bold" }, children));
 };
 var LightFullScreenLoader = ({
   width,
@@ -4019,43 +4019,72 @@ var AttachedInputs = ({
     }
   );
 };
+function Autosuggest({
+  label,
+  fetcher,
+  children,
+  onSelectionChange
+}) {
+  const list2 = useAsyncList({
+    async load({ filterText }) {
+      return {
+        items: await fetcher(filterText)
+      };
+    }
+  });
+  return /* @__PURE__ */ React49__default.createElement(
+    Combobox,
+    {
+      label,
+      items: list2.items,
+      inputValue: list2.filterText,
+      onInputChange: list2.setFilterText,
+      isLoading: list2.isLoading,
+      onSelectionChange
+    },
+    children
+  );
+}
 var Dialog = ({ title, children, ...props }) => {
   const ref = useRef(null);
   const { dialogProps, titleProps } = useDialog(props, ref);
   return /* @__PURE__ */ React49__default.createElement(Box, { ...dialogProps, ref, outline: "none" }, title && /* @__PURE__ */ React49__default.createElement(Heading$1, { as: "h3", ...titleProps }, title), children);
 };
-var Popover3 = ({
-  children,
-  state: state2,
-  triggerRef,
-  offset = 0,
-  crossOffset = 0,
-  placement = "bottom"
-}) => {
-  var _a6;
-  const popoverRef = useRef(null);
-  const { popoverProps, underlayProps } = usePopover(
-    {
-      triggerRef,
-      popoverRef,
-      offset,
-      crossOffset,
-      placement
-    },
-    state2
-  );
-  return /* @__PURE__ */ React49__default.createElement(Overlay, null, /* @__PURE__ */ React49__default.createElement(Box, { ...underlayProps, position: "fixed", inset: "0" }), /* @__PURE__ */ React49__default.createElement(
-    Box,
-    {
-      ...popoverProps,
-      ref: popoverRef,
-      minWidth: ((_a6 = triggerRef.current) == null ? void 0 : _a6.clientWidth) ?? "auto"
-    },
-    /* @__PURE__ */ React49__default.createElement(DismissButton, { onDismiss: state2.close }),
+var Popover3 = forwardRef$1(
+  ({
     children,
-    /* @__PURE__ */ React49__default.createElement(DismissButton, { onDismiss: state2.close })
-  ));
-};
+    state: state2,
+    triggerRef,
+    offset = 0,
+    crossOffset = 0,
+    placement = "bottom"
+  }, ref) => {
+    var _a6;
+    const internalRef = useRef(null);
+    const popoverRef = ref ?? internalRef;
+    const { popoverProps, underlayProps } = usePopover(
+      {
+        triggerRef,
+        popoverRef,
+        offset,
+        crossOffset,
+        placement
+      },
+      state2
+    );
+    return /* @__PURE__ */ React49__default.createElement(Overlay, null, /* @__PURE__ */ React49__default.createElement(Box, { ...underlayProps, position: "fixed", inset: "0" }), /* @__PURE__ */ React49__default.createElement(
+      Box,
+      {
+        ...popoverProps,
+        ref: popoverRef,
+        minWidth: ((_a6 = triggerRef.current) == null ? void 0 : _a6.clientWidth) ?? "auto"
+      },
+      /* @__PURE__ */ React49__default.createElement(DismissButton, { onDismiss: state2.close }),
+      children,
+      /* @__PURE__ */ React49__default.createElement(DismissButton, { onDismiss: state2.close })
+    ));
+  }
+);
 
 // src/input/CardSelect.tsx
 var CardSelect = forwardRef(
@@ -4188,6 +4217,336 @@ var ChoiceChip = forwardRef((props, ref) => {
     )
   );
 });
+function Combobox({
+  label,
+  isLoading,
+  ...rest
+}) {
+  const { contains: contains2 } = useFilter({ sensitivity: "base" });
+  const state2 = useComboBoxState({
+    ...rest,
+    defaultFilter: contains2
+  });
+  const inputRef = useRef(null);
+  const listBoxRef = useRef(null);
+  const popoverRef = useRef(null);
+  const {
+    inputProps: { size: size2, ...inputProps },
+    listBoxProps
+  } = useComboBox(
+    {
+      ...rest,
+      inputRef,
+      listBoxRef,
+      popoverRef
+    },
+    state2
+  );
+  return /* @__PURE__ */ React49__default.createElement(FormControl, null, /* @__PURE__ */ React49__default.createElement(
+    Input,
+    {
+      ...inputProps,
+      ref: inputRef,
+      label,
+      borderBottomRadius: state2.isOpen ? 0 : "sm",
+      rightIcon: isLoading ? /* @__PURE__ */ React49__default.createElement(
+        ColorSpinner,
+        {
+          width: "1.5rem",
+          alignSelf: "center",
+          css: {
+            div: {
+              display: "flex",
+              alignItems: "center"
+            }
+          }
+        }
+      ) : void 0
+    }
+  ), state2.isOpen && /* @__PURE__ */ React49__default.createElement(
+    Popover3,
+    {
+      state: state2,
+      triggerRef: inputRef,
+      ref: popoverRef,
+      placement: "bottom start"
+    },
+    /* @__PURE__ */ React49__default.createElement(
+      ListBox,
+      {
+        ...listBoxProps,
+        state: state2,
+        listBoxRef,
+        borderBottomRadius: "sm"
+      },
+      rest.children
+    )
+  ));
+}
+var FormControl = forwardRef((props, ref) => {
+  return /* @__PURE__ */ React49__default.createElement(FormControl$1, { ...props, ref });
+});
+var FormErrorMessage = ({
+  children,
+  ...boxProps
+}) => {
+  const formControlContext = useFormControlContext();
+  if (!formControlContext) {
+    throw new Error(
+      "FormErrorMessage must be used within a FormControl component"
+    );
+  }
+  if (!formControlContext.isInvalid) {
+    return null;
+  }
+  const { ref, ...errorMessageProps } = formControlContext.getErrorMessageProps();
+  return /* @__PURE__ */ React49__default.createElement(Box, { position: "relative", ref }, /* @__PURE__ */ React49__default.createElement(
+    Box,
+    {
+      borderRadius: "xs",
+      backgroundColor: "lightRed",
+      color: "darkGrey",
+      paddingX: 1.5,
+      paddingY: 1,
+      textStyle: "xs",
+      width: "fit-content",
+      position: "absolute",
+      top: -0.5,
+      left: 3,
+      zIndex: "popover",
+      maxWidth: "50ch",
+      ...errorMessageProps,
+      ...boxProps
+    },
+    /* @__PURE__ */ React49__default.createElement(Arrow, { position: "absolute", top: "-0.25em", left: "1em" }),
+    children
+  ));
+};
+var Arrow = (props) => {
+  return /* @__PURE__ */ React49__default.createElement(
+    Box,
+    {
+      ...props,
+      as: "svg",
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      transform: "rotate(45deg)"
+    },
+    /* @__PURE__ */ React49__default.createElement(
+      Box,
+      {
+        as: "path",
+        fill: "lightRed",
+        d: "M 0\n        0 Q 2.4 6 0 12 Q 6 9.6 12 12 Q 9.6 6 12 0 Q 6 2.4 0 0 z"
+      }
+    )
+  );
+};
+var FormLabel3 = forwardRef((props, ref) => {
+  return /* @__PURE__ */ React49__default.createElement(FormLabel, { ...props, ref });
+});
+var SelectItem = Item;
+function ListBox({
+  isLoading,
+  listBoxRef,
+  state: state2,
+  ...props
+}) {
+  const { listBoxProps } = useListBox(props, state2, listBoxRef);
+  const styles2 = useMultiStyleConfig("ListBox", {});
+  return /* @__PURE__ */ React49__default.createElement(
+    List,
+    {
+      ...listBoxProps,
+      ref: listBoxRef,
+      sx: styles2.container,
+      "aria-busy": isLoading
+    },
+    [...state2.collection].map(
+      (item) => item.type === "section" ? /* @__PURE__ */ React49__default.createElement(ListBoxSection, { key: item.key, section: item, state: state2 }) : /* @__PURE__ */ React49__default.createElement(Option, { key: item.key, item, state: state2 })
+    )
+  );
+}
+function ItemLabel({ children }) {
+  let { labelProps } = useOptionContext();
+  const styles2 = useMultiStyleConfig("ListBox", {});
+  return /* @__PURE__ */ React49__default.createElement(Box, { ...labelProps, sx: styles2.label }, children);
+}
+var SelectItemLabel = ItemLabel;
+function ItemDescription({ children }) {
+  let { descriptionProps } = useOptionContext();
+  const styles2 = useMultiStyleConfig("ListBox", {});
+  return /* @__PURE__ */ React49__default.createElement(Box, { ...descriptionProps, sx: styles2.description }, children);
+}
+var SelectItemDescription = ItemDescription;
+function Option({ item, state: state2 }) {
+  const ref = useRef(null);
+  const {
+    optionProps,
+    isSelected,
+    isDisabled,
+    isFocused,
+    labelProps,
+    descriptionProps
+  } = useOption({ key: item.key }, state2, ref);
+  const styles2 = useMultiStyleConfig("ListBox", {});
+  let dataFields = {};
+  if (isSelected) {
+    dataFields["data-selected"] = true;
+  }
+  if (isDisabled) {
+    dataFields["data-disabled"] = true;
+  }
+  if (isFocused) {
+    dataFields["data-focus"] = true;
+  }
+  return /* @__PURE__ */ React49__default.createElement(OptionContext.Provider, { value: { labelProps, descriptionProps } }, /* @__PURE__ */ React49__default.createElement(ListItem, { ...optionProps, ...dataFields, ref, sx: styles2.item }, item.rendered));
+}
+var OptionContext = React49__default.createContext({
+  labelProps: {},
+  descriptionProps: {}
+});
+var useOptionContext = () => {
+  return useContext(OptionContext);
+};
+function ListBoxSection({ section, state: state2 }) {
+  const { itemProps, headingProps, groupProps } = useListBoxSection({
+    heading: section.rendered,
+    "aria-label": section["aria-label"]
+  });
+  const isFirstSection = section.key !== state2.collection.getFirstKey();
+  const titleBackgroundColor = useColorModeValue("platinum", "dimGrey");
+  const titleColor = useColorModeValue("darkGrey", "white");
+  return /* @__PURE__ */ React49__default.createElement(ListItem, { ...itemProps }, section.rendered && /* @__PURE__ */ React49__default.createElement(
+    Box,
+    {
+      textStyle: "xs",
+      backgroundColor: titleBackgroundColor,
+      color: titleColor,
+      paddingX: 3,
+      paddingY: 1,
+      marginTop: isFirstSection ? 0 : 0,
+      ...headingProps
+    },
+    section.rendered
+  ), /* @__PURE__ */ React49__default.createElement(List, { ...groupProps, padding: 0, listStyleType: "none" }, [...state2.collection.getChildren(section.key)].map((item) => /* @__PURE__ */ React49__default.createElement(Option, { key: item.key, item, state: state2 }))));
+}
+
+// src/input/InfoSelect.tsx
+function InfoSelect({
+  placeholder,
+  width = "100%",
+  height = "auto",
+  onChange,
+  value,
+  isLabelSrOnly,
+  defaultValue,
+  ...props
+}) {
+  const renamedProps = {
+    onSelectionChange: onChange,
+    selectedKey: value,
+    defaultSelectedKey: defaultValue,
+    ...props
+  };
+  const state2 = useSelectState(renamedProps);
+  const triggerRef = useRef(null);
+  const listboxRef = useRef(null);
+  const { labelProps, triggerProps, valueProps, menuProps } = useSelect(
+    renamedProps,
+    state2,
+    triggerRef
+  );
+  const styles2 = useMultiStyleConfig("InfoSelect", {
+    isOpen: state2.isOpen,
+    isLabelSrOnly
+  });
+  const { buttonProps } = useButton(triggerProps, triggerRef);
+  const { t: t2 } = useTranslation();
+  const formControl = useFormControlProps(props);
+  return /* @__PURE__ */ React49__default.createElement(Box, { sx: styles2.container }, /* @__PURE__ */ React49__default.createElement(chakra.div, { ...labelProps, sx: styles2.label }, props.label), /* @__PURE__ */ React49__default.createElement(
+    HiddenSelect,
+    {
+      state: state2,
+      triggerRef,
+      label: props.label,
+      name: props.name
+    }
+  ), /* @__PURE__ */ React49__default.createElement(
+    chakra.button,
+    {
+      type: "button",
+      ref: triggerRef,
+      sx: styles2.button,
+      ...buttonProps,
+      width,
+      height,
+      "data-attachable": true,
+      "aria-invalid": formControl.isInvalid,
+      "aria-describedby": formControl["aria-describedby"]
+    },
+    /* @__PURE__ */ React49__default.createElement(Box, { ...valueProps }, state2.selectedItem ? state2.selectedItem.textValue ?? state2.selectedItem.rendered : placeholder ?? t2(texts10.selectAnOption)),
+    /* @__PURE__ */ React49__default.createElement(Box, { sx: styles2.arrowIcon }, state2.isOpen ? /* @__PURE__ */ React49__default.createElement(DropdownUpFill24Icon, null) : /* @__PURE__ */ React49__default.createElement(DropdownDownFill24Icon, null))
+  ), state2.isOpen && /* @__PURE__ */ React49__default.createElement(Popover3, { state: state2, triggerRef }, /* @__PURE__ */ React49__default.createElement(
+    ListBox,
+    {
+      ...menuProps,
+      state: state2,
+      listBoxRef: listboxRef,
+      borderBottomRadius: "sm"
+    },
+    props.children
+  )));
+}
+var texts10 = createTexts({
+  selectAnOption: {
+    nb: "Velg et alternativ",
+    nn: "Velg eit alternativ",
+    sv: "V\xE4lj ett alternativ",
+    en: "Choose an option"
+  }
+});
+var Input = forwardRef(
+  ({ label, leftIcon, rightIcon, id, ...props }, ref) => {
+    const formControlProps = useFormControlContext();
+    const fallbackId = `input-${useId()}`;
+    const inputId = id ?? (formControlProps == null ? void 0 : formControlProps.id) ?? fallbackId;
+    return /* @__PURE__ */ React49__default.createElement(InputGroup, { position: "relative" }, leftIcon && /* @__PURE__ */ React49__default.createElement(InputLeftElement, null, leftIcon), /* @__PURE__ */ React49__default.createElement(
+      Input$1,
+      {
+        "data-attachable": true,
+        paddingLeft: leftIcon ? 7 : void 0,
+        paddingRight: rightIcon ? 7 : void 0,
+        ...props,
+        id: inputId,
+        ref,
+        placeholder: " "
+      }
+    ), /* @__PURE__ */ React49__default.createElement(FormLabel, { htmlFor: inputId, pointerEvents: "none" }, label), rightIcon && /* @__PURE__ */ React49__default.createElement(InputRightElement, null, rightIcon));
+  }
+);
+var InputLeftElement2 = forwardRef(
+  (props, ref) => /* @__PURE__ */ React49__default.createElement(InputLeftElement, { ...props, ref })
+);
+var InputRightElement2 = forwardRef(
+  (props, ref) => /* @__PURE__ */ React49__default.createElement(InputRightElement, { ...props, ref })
+);
+var NativeSelect = forwardRef(
+  ({ label, ...props }, ref) => {
+    const styles2 = useMultiStyleConfig("Select", props);
+    return /* @__PURE__ */ React49__default.createElement(FormControl, null, /* @__PURE__ */ React49__default.createElement(
+      Select,
+      {
+        "data-attachable": true,
+        ...props,
+        rootProps: { __css: styles2.root },
+        ref
+      }
+    ), label && /* @__PURE__ */ React49__default.createElement(FormLabel3, null, label));
+  }
+);
 var colors = {
   ...tokens10__default.color.alias,
   ...tokens10__default.color.palette,
@@ -4262,7 +4621,7 @@ function NumericStepper({
     VerySmallButton,
     {
       icon: /* @__PURE__ */ React49__default.createElement(SubtractIcon, { color: "white" }),
-      "aria-label": t2(texts10.decrementButtonAriaLabel),
+      "aria-label": t2(texts11.decrementButtonAriaLabel),
       onClick: () => onChange(value - 1),
       visibility: value <= minValue ? "hidden" : "visible",
       isDisabled: formControlProps.disabled
@@ -4320,7 +4679,7 @@ function NumericStepper({
     VerySmallButton,
     {
       icon: /* @__PURE__ */ React49__default.createElement(AddIcon, { color: "white" }),
-      "aria-label": t2(texts10.incrementButtonAriaLabel),
+      "aria-label": t2(texts11.incrementButtonAriaLabel),
       onClick: () => onChange(value + 1),
       visibility: value >= maxValue ? "hidden" : "visible",
       isDisabled: formControlProps.disabled
@@ -4400,7 +4759,7 @@ var AddIcon = (props) => /* @__PURE__ */ React49__default.createElement(
     }
   )
 );
-var texts10 = createTexts({
+var texts11 = createTexts({
   decrementButtonAriaLabel: {
     nb: "Trekk fra 1",
     en: "Subtract 1",
@@ -4414,228 +4773,6 @@ var texts10 = createTexts({
     sv: "L\xE4gg till 1"
   }
 });
-var FormControl = forwardRef((props, ref) => {
-  return /* @__PURE__ */ React49__default.createElement(FormControl$1, { ...props, ref });
-});
-var FormErrorMessage = ({
-  children,
-  ...boxProps
-}) => {
-  const formControlContext = useFormControlContext();
-  if (!formControlContext) {
-    throw new Error(
-      "FormErrorMessage must be used within a FormControl component"
-    );
-  }
-  if (!formControlContext.isInvalid) {
-    return null;
-  }
-  const { ref, ...errorMessageProps } = formControlContext.getErrorMessageProps();
-  return /* @__PURE__ */ React49__default.createElement(Box, { position: "relative", ref }, /* @__PURE__ */ React49__default.createElement(
-    Box,
-    {
-      borderRadius: "xs",
-      backgroundColor: "lightRed",
-      color: "darkGrey",
-      paddingX: 1.5,
-      paddingY: 1,
-      textStyle: "xs",
-      width: "fit-content",
-      position: "absolute",
-      top: -1.5,
-      left: 3,
-      zIndex: "popover",
-      maxWidth: "50ch",
-      ...errorMessageProps,
-      ...boxProps
-    },
-    /* @__PURE__ */ React49__default.createElement(Arrow, { position: "absolute", top: "-0.25em", left: "1em" }),
-    children
-  ));
-};
-var Arrow = (props) => {
-  return /* @__PURE__ */ React49__default.createElement(
-    Box,
-    {
-      ...props,
-      as: "svg",
-      width: "16",
-      height: "16",
-      viewBox: "0 0 16 16",
-      fill: "none",
-      transform: "rotate(45deg)"
-    },
-    /* @__PURE__ */ React49__default.createElement(
-      Box,
-      {
-        as: "path",
-        fill: "lightRed",
-        d: "M 0\n        0 Q 2.4 6 0 12 Q 6 9.6 12 12 Q 9.6 6 12 0 Q 6 2.4 0 0 z"
-      }
-    )
-  );
-};
-var FormLabel3 = forwardRef((props, ref) => {
-  return /* @__PURE__ */ React49__default.createElement(FormLabel, { ...props, ref });
-});
-var ListBox = forwardRef((props, ref) => {
-  const { state: state2, listBoxOptions, ...rest } = props;
-  const styles2 = useMultiStyleConfig("ListBox", {});
-  const internalRef = useRef(null);
-  const listBoxRef = ref ?? internalRef;
-  const { listBoxProps } = useListBox(listBoxOptions, state2, listBoxRef);
-  return /* @__PURE__ */ React49__default.createElement(
-    Box,
-    {
-      as: "ul",
-      ...listBoxProps,
-      sx: styles2.container,
-      ref: listBoxRef,
-      ...rest
-    },
-    Array.from(state2.collection).map((item) => /* @__PURE__ */ React49__default.createElement(Option, { key: item.key, item, state: state2 }))
-  );
-});
-var OptionContext = React49__default.createContext({
-  labelProps: {},
-  descriptionProps: {}
-});
-var useOptionContext = () => {
-  return useContext(OptionContext);
-};
-var Option = ({ item, state: state2 }) => {
-  const ref = useRef(null);
-  const styles2 = useMultiStyleConfig("ListBox", {});
-  const { optionProps, labelProps, descriptionProps } = useOption(
-    { key: item.key },
-    state2,
-    ref
-  );
-  return /* @__PURE__ */ React49__default.createElement(chakra.li, { ...optionProps, ref, sx: styles2.item }, /* @__PURE__ */ React49__default.createElement(OptionContext.Provider, { value: { labelProps, descriptionProps } }, item.rendered));
-};
-function SelectItemLabel({ children }) {
-  let { labelProps } = useOptionContext();
-  const styles2 = useMultiStyleConfig("ListBox", {});
-  return /* @__PURE__ */ React49__default.createElement(Box, { ...labelProps, sx: styles2.label }, children);
-}
-function SelectItemDescription({
-  children
-}) {
-  let { descriptionProps } = useOptionContext();
-  const styles2 = useMultiStyleConfig("ListBox", {});
-  return /* @__PURE__ */ React49__default.createElement(Box, { ...descriptionProps, sx: styles2.description }, children);
-}
-
-// src/input/InfoSelect.tsx
-function InfoSelect({
-  placeholder,
-  width = "100%",
-  height = "auto",
-  onChange,
-  value,
-  isLabelSrOnly,
-  defaultValue,
-  ...props
-}) {
-  const renamedProps = {
-    onSelectionChange: onChange,
-    selectedKey: value,
-    defaultSelectedKey: defaultValue,
-    ...props
-  };
-  const state2 = useSelectState(renamedProps);
-  const triggerRef = useRef(null);
-  const { labelProps, triggerProps, valueProps, menuProps } = useSelect(
-    renamedProps,
-    state2,
-    triggerRef
-  );
-  const styles2 = useMultiStyleConfig("InfoSelect", {
-    isOpen: state2.isOpen,
-    isLabelSrOnly
-  });
-  const { buttonProps } = useButton(triggerProps, triggerRef);
-  const { t: t2 } = useTranslation();
-  const formControl = useFormControlProps(props);
-  return /* @__PURE__ */ React49__default.createElement(Box, { sx: styles2.container }, /* @__PURE__ */ React49__default.createElement(chakra.div, { ...labelProps, sx: styles2.label }, props.label), /* @__PURE__ */ React49__default.createElement(
-    HiddenSelect,
-    {
-      state: state2,
-      triggerRef,
-      label: props.label,
-      name: props.name
-    }
-  ), /* @__PURE__ */ React49__default.createElement(
-    chakra.button,
-    {
-      type: "button",
-      ref: triggerRef,
-      sx: styles2.button,
-      ...buttonProps,
-      width,
-      height,
-      "data-attachable": true,
-      "aria-invalid": formControl.isInvalid,
-      "aria-describedby": formControl["aria-describedby"]
-    },
-    /* @__PURE__ */ React49__default.createElement(Box, { ...valueProps }, state2.selectedItem ? state2.selectedItem.textValue ?? state2.selectedItem.rendered : placeholder ?? t2(texts11.selectAnOption)),
-    /* @__PURE__ */ React49__default.createElement(Box, { sx: styles2.arrowIcon }, state2.isOpen ? /* @__PURE__ */ React49__default.createElement(DropdownUpFill24Icon, null) : /* @__PURE__ */ React49__default.createElement(DropdownDownFill24Icon, null))
-  ), state2.isOpen && /* @__PURE__ */ React49__default.createElement(Popover3, { state: state2, triggerRef }, /* @__PURE__ */ React49__default.createElement(
-    ListBox,
-    {
-      listBoxOptions: menuProps,
-      state: state2,
-      borderBottomRadius: "sm"
-    }
-  )));
-}
-var texts11 = createTexts({
-  selectAnOption: {
-    nb: "Velg et alternativ",
-    nn: "Velg eit alternativ",
-    sv: "V\xE4lj ett alternativ",
-    en: "Choose an option"
-  }
-});
-var Input = forwardRef(
-  ({ label, leftIcon, rightIcon, id, ...props }, ref) => {
-    const formControlProps = useFormControlContext();
-    const fallbackId = `input-${useId()}`;
-    const inputId = id ?? (formControlProps == null ? void 0 : formControlProps.id) ?? fallbackId;
-    return /* @__PURE__ */ React49__default.createElement(InputGroup, { position: "relative" }, leftIcon && /* @__PURE__ */ React49__default.createElement(InputLeftElement, null, leftIcon), /* @__PURE__ */ React49__default.createElement(
-      Input$1,
-      {
-        "data-attachable": true,
-        paddingLeft: leftIcon ? 7 : void 0,
-        paddingRight: rightIcon ? 7 : void 0,
-        ...props,
-        id: inputId,
-        ref,
-        placeholder: " "
-      }
-    ), /* @__PURE__ */ React49__default.createElement(FormLabel, { htmlFor: inputId, pointerEvents: "none" }, label), rightIcon && /* @__PURE__ */ React49__default.createElement(InputRightElement, null, rightIcon));
-  }
-);
-var InputLeftElement2 = forwardRef(
-  (props, ref) => /* @__PURE__ */ React49__default.createElement(InputLeftElement, { ...props, ref })
-);
-var InputRightElement2 = forwardRef(
-  (props, ref) => /* @__PURE__ */ React49__default.createElement(InputRightElement, { ...props, ref })
-);
-var NativeSelect = forwardRef(
-  ({ label, ...props }, ref) => {
-    const styles2 = useMultiStyleConfig("Select", props);
-    return /* @__PURE__ */ React49__default.createElement(FormControl, null, /* @__PURE__ */ React49__default.createElement(
-      Select,
-      {
-        "data-attachable": true,
-        ...props,
-        rootProps: { __css: styles2.root },
-        ref
-      }
-    ), label && /* @__PURE__ */ React49__default.createElement(FormLabel3, null, label));
-  }
-);
 var PasswordInput = forwardRef(
   ({ leftIcon, id, label, ...props }, ref) => {
     const { isOpen: isShowingPassword, onToggle } = useDisclosure();
@@ -4705,7 +4842,7 @@ var PhoneNumberInput = forwardRef(
             height: "100%",
             value: "+47"
           },
-          /* @__PURE__ */ React49__default.createElement(Item, { key: "+47" }, "+47")
+          /* @__PURE__ */ React49__default.createElement(SelectItem, { key: "+47" }, "+47")
         )
       },
       /* @__PURE__ */ React49__default.createElement(
@@ -4750,7 +4887,7 @@ var texts13 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React49__default.lazy(() => import('./CountryCodeSelect-WGG2Z3VI.mjs'));
+var LazyCountryCodeSelect = React49__default.lazy(() => import('./CountryCodeSelect-5DBHKSF3.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React49__default.createElement(Radio$1, { ...props, ref });
 });
@@ -12873,19 +13010,19 @@ var config24 = helpers15.defineMultiStyleConfig({
       },
       _focus: {
         outline: "none",
-        background: mode("mint", "darkTeal")(props)
+        backgroundColor: mode("mint", "darkTeal")(props)
       },
       _selected: {
-        background: mode("pine", "pine")(props),
+        backgroundColor: mode("pine", "pine")(props),
         color: mode("white", "white")(props)
       }
     },
     label: {},
     description: {
       fontSize: ["mobile.xs", "desktop.xs"],
-      color: "dimGrey",
+      color: mode("dimGrey", "silver")(props),
       "[aria-selected='true'] &": {
-        color: "lightGrey"
+        color: mode("lightGrey", "platinum")(props)
       }
     }
   })
@@ -14378,4 +14515,4 @@ var getToastComponent = (opts) => {
   return ({ id }) => /* @__PURE__ */ React49__default.createElement(BaseToast, { id, variant: opts.variant }, opts.text);
 };
 
-export { Accordion, AttachedInputs, Badge, Button, ButtonGroup, Card, CardSelect, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, ColorInlineLoader, ColorSpinner, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerContent, Expandable, ExpandableAlert, ExpandableItem, FloatingActionButton, FormControl, FormErrorMessage, FormLabel3 as FormLabel, Heading, IconButton, InfoSelect, InfoTag, Input, InputLeftElement2 as InputLeftElement, InputRightElement2 as InputRightElement, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightSpinner, LineIcon, ListBox, ModalHeader, NativeSelect, NumericStepper, PasswordInput, PhoneNumberInput, PlayPauseButton, PopoverWizardBody, ProgressBar, ProgressLoader, Radio, RadioGroup, SearchInput, SelectItemDescription, SelectItemLabel, SimpleDrawer, SimplePopover, Skeleton, SkeletonCircle, SkeletonText, SkipButton, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Table, Tabs, Text4 as Text, TextLink, Textarea, TimePicker, TravelTag, VyLogo, WizardPopover, createTexts, fontFaces, theme, useToast, useTranslation };
+export { Accordion, AttachedInputs, Autosuggest, Badge, Button, ButtonGroup, Card, CardSelect, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, ColorInlineLoader, ColorSpinner, Combobox, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerContent, Expandable, ExpandableAlert, ExpandableItem, FloatingActionButton, FormControl, FormErrorMessage, FormLabel3 as FormLabel, Heading, IconButton, InfoSelect, InfoTag, Input, InputLeftElement2 as InputLeftElement, InputRightElement2 as InputRightElement, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightSpinner, LineIcon, ListBox, ModalHeader, NativeSelect, NumericStepper, PasswordInput, PhoneNumberInput, PlayPauseButton, PopoverWizardBody, ProgressBar, ProgressLoader, Radio, RadioGroup, SearchInput, SelectItem, SelectItemDescription, SelectItemLabel, SimpleDrawer, SimplePopover, Skeleton, SkeletonCircle, SkeletonText, SkipButton, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Table, Tabs, Text4 as Text, TextLink, Textarea, TimePicker, TravelTag, VyLogo, WizardPopover, createTexts, fontFaces, theme, useToast, useTranslation };