@vygruppen/spor-react 2.3.3 → 2.4.0

package/dist/index.js

@@ -322,6 +322,7 @@ var init_DarkInlineLoader = __esm({
 exports.DarkSpinner = void 0;
 var init_DarkSpinner = __esm({
   "src/loader/DarkSpinner.tsx"() {
+    init_src();
     init_ClientOnly();
     init_Lottie();
     exports.DarkSpinner = ({
@@ -330,7 +331,7 @@ var init_DarkSpinner = __esm({
       maxWidth,
       ...props
     }) => {
-      return /* @__PURE__ */ React49__namespace.default.createElement(react.Center, { flexDirection: "column", ...props }, /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { width, maxWidth }, /* @__PURE__ */ React49__namespace.default.createElement(ClientOnly, null, () => /* @__PURE__ */ React49__namespace.default.createElement(Lottie, { animationData: sporLoader.spinnerDarkData }))), children && /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { mt: 3, fontWeight: "bold" }, children));
+      return /* @__PURE__ */ React49__namespace.default.createElement(react.Center, { flexDirection: "column", ...props }, /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { width, maxWidth }, /* @__PURE__ */ React49__namespace.default.createElement(ClientOnly, null, () => /* @__PURE__ */ React49__namespace.default.createElement(Lottie, { animationData: sporLoader.spinnerDarkData }))), children && /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { marginTop: 3, fontWeight: "bold" }, children));
     };
   }
 });
@@ -3749,6 +3750,37 @@ var init_AttachedInputs = __esm({
     };
   }
 });
+function Autosuggest({
+  label,
+  fetcher,
+  children,
+  onSelectionChange
+}) {
+  const list2 = reactStately.useAsyncList({
+    async load({ filterText }) {
+      return {
+        items: await fetcher(filterText)
+      };
+    }
+  });
+  return /* @__PURE__ */ React49__namespace.default.createElement(
+    Combobox,
+    {
+      label,
+      items: list2.items,
+      inputValue: list2.filterText,
+      onInputChange: list2.setFilterText,
+      isLoading: list2.isLoading,
+      onSelectionChange
+    },
+    children
+  );
+}
+var init_Autosuggest = __esm({
+  "src/input/Autosuggest.tsx"() {
+    init_src();
+  }
+});
 var Dialog;
 var init_Dialog = __esm({
   "src/input/Dialog.tsx"() {
@@ -3762,38 +3794,41 @@ var init_Dialog = __esm({
 var Popover3;
 var init_Popover = __esm({
   "src/input/Popover.tsx"() {
-    Popover3 = ({
-      children,
-      state: state2,
-      triggerRef,
-      offset = 0,
-      crossOffset = 0,
-      placement = "bottom"
-    }) => {
-      var _a6;
-      const popoverRef = React49.useRef(null);
-      const { popoverProps, underlayProps } = reactAria.usePopover(
-        {
-          triggerRef,
-          popoverRef,
-          offset,
-          crossOffset,
-          placement
-        },
-        state2
-      );
-      return /* @__PURE__ */ React49__namespace.default.createElement(reactAria.Overlay, null, /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { ...underlayProps, position: "fixed", inset: "0" }), /* @__PURE__ */ React49__namespace.default.createElement(
-        react.Box,
-        {
-          ...popoverProps,
-          ref: popoverRef,
-          minWidth: ((_a6 = triggerRef.current) == null ? void 0 : _a6.clientWidth) ?? "auto"
-        },
-        /* @__PURE__ */ React49__namespace.default.createElement(reactAria.DismissButton, { onDismiss: state2.close }),
+    Popover3 = React49.forwardRef(
+      ({
         children,
-        /* @__PURE__ */ React49__namespace.default.createElement(reactAria.DismissButton, { onDismiss: state2.close })
-      ));
-    };
+        state: state2,
+        triggerRef,
+        offset = 0,
+        crossOffset = 0,
+        placement = "bottom"
+      }, ref) => {
+        var _a6;
+        const internalRef = React49.useRef(null);
+        const popoverRef = ref ?? internalRef;
+        const { popoverProps, underlayProps } = reactAria.usePopover(
+          {
+            triggerRef,
+            popoverRef,
+            offset,
+            crossOffset,
+            placement
+          },
+          state2
+        );
+        return /* @__PURE__ */ React49__namespace.default.createElement(reactAria.Overlay, null, /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { ...underlayProps, position: "fixed", inset: "0" }), /* @__PURE__ */ React49__namespace.default.createElement(
+          react.Box,
+          {
+            ...popoverProps,
+            ref: popoverRef,
+            minWidth: ((_a6 = triggerRef.current) == null ? void 0 : _a6.clientWidth) ?? "auto"
+          },
+          /* @__PURE__ */ React49__namespace.default.createElement(reactAria.DismissButton, { onDismiss: state2.close }),
+          children,
+          /* @__PURE__ */ React49__namespace.default.createElement(reactAria.DismissButton, { onDismiss: state2.close })
+        ));
+      }
+    );
   }
 });
 function useForceRerender(shouldRerender) {
@@ -4697,6 +4732,384 @@ var init_ChoiceChip = __esm({
     });
   }
 });
+function Combobox({
+  label,
+  isLoading,
+  ...rest
+}) {
+  const { contains: contains2 } = reactAria.useFilter({ sensitivity: "base" });
+  const state2 = reactStately.useComboBoxState({
+    ...rest,
+    defaultFilter: contains2
+  });
+  const inputRef = React49.useRef(null);
+  const listBoxRef = React49.useRef(null);
+  const popoverRef = React49.useRef(null);
+  const {
+    inputProps: { size: size2, ...inputProps },
+    listBoxProps
+  } = reactAria.useComboBox(
+    {
+      ...rest,
+      inputRef,
+      listBoxRef,
+      popoverRef
+    },
+    state2
+  );
+  return /* @__PURE__ */ React49__namespace.default.createElement(exports.FormControl, null, /* @__PURE__ */ React49__namespace.default.createElement(
+    exports.Input,
+    {
+      ...inputProps,
+      ref: inputRef,
+      label,
+      borderBottomRadius: state2.isOpen ? 0 : "sm",
+      rightIcon: isLoading ? /* @__PURE__ */ React49__namespace.default.createElement(
+        exports.ColorSpinner,
+        {
+          width: "1.5rem",
+          alignSelf: "center",
+          css: {
+            div: {
+              display: "flex",
+              alignItems: "center"
+            }
+          }
+        }
+      ) : void 0
+    }
+  ), state2.isOpen && /* @__PURE__ */ React49__namespace.default.createElement(
+    Popover3,
+    {
+      state: state2,
+      triggerRef: inputRef,
+      ref: popoverRef,
+      placement: "bottom start"
+    },
+    /* @__PURE__ */ React49__namespace.default.createElement(
+      ListBox,
+      {
+        ...listBoxProps,
+        state: state2,
+        listBoxRef,
+        borderBottomRadius: "sm"
+      },
+      rest.children
+    )
+  ));
+}
+var init_Combobox = __esm({
+  "src/input/Combobox.tsx"() {
+    init_src();
+    init_Popover();
+  }
+});
+exports.FormControl = void 0;
+var init_FormControl = __esm({
+  "src/input/FormControl.tsx"() {
+    exports.FormControl = react.forwardRef((props, ref) => {
+      return /* @__PURE__ */ React49__namespace.default.createElement(react.FormControl, { ...props, ref });
+    });
+  }
+});
+exports.FormErrorMessage = void 0; var Arrow;
+var init_FormErrorMessage = __esm({
+  "src/input/FormErrorMessage.tsx"() {
+    exports.FormErrorMessage = ({
+      children,
+      ...boxProps
+    }) => {
+      const formControlContext = react.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__namespace.default.createElement(react.Box, { position: "relative", ref }, /* @__PURE__ */ React49__namespace.default.createElement(
+        react.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__namespace.default.createElement(Arrow, { position: "absolute", top: "-0.25em", left: "1em" }),
+        children
+      ));
+    };
+    Arrow = (props) => {
+      return /* @__PURE__ */ React49__namespace.default.createElement(
+        react.Box,
+        {
+          ...props,
+          as: "svg",
+          width: "16",
+          height: "16",
+          viewBox: "0 0 16 16",
+          fill: "none",
+          transform: "rotate(45deg)"
+        },
+        /* @__PURE__ */ React49__namespace.default.createElement(
+          react.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"
+          }
+        )
+      );
+    };
+  }
+});
+exports.FormLabel = void 0;
+var init_FormLabel = __esm({
+  "src/input/FormLabel.tsx"() {
+    exports.FormLabel = react.forwardRef((props, ref) => {
+      return /* @__PURE__ */ React49__namespace.default.createElement(react.FormLabel, { ...props, ref });
+    });
+  }
+});
+function ListBox({
+  isLoading,
+  listBoxRef,
+  state: state2,
+  ...props
+}) {
+  const { listBoxProps } = reactAria.useListBox(props, state2, listBoxRef);
+  const styles2 = react.useMultiStyleConfig("ListBox", {});
+  return /* @__PURE__ */ React49__namespace.default.createElement(
+    react.List,
+    {
+      ...listBoxProps,
+      ref: listBoxRef,
+      sx: styles2.container,
+      "aria-busy": isLoading
+    },
+    [...state2.collection].map(
+      (item) => item.type === "section" ? /* @__PURE__ */ React49__namespace.default.createElement(ListBoxSection, { key: item.key, section: item, state: state2 }) : /* @__PURE__ */ React49__namespace.default.createElement(Option, { key: item.key, item, state: state2 })
+    )
+  );
+}
+function ItemLabel({ children }) {
+  let { labelProps } = useOptionContext();
+  const styles2 = react.useMultiStyleConfig("ListBox", {});
+  return /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { ...labelProps, sx: styles2.label }, children);
+}
+function ItemDescription({ children }) {
+  let { descriptionProps } = useOptionContext();
+  const styles2 = react.useMultiStyleConfig("ListBox", {});
+  return /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { ...descriptionProps, sx: styles2.description }, children);
+}
+function Option({ item, state: state2 }) {
+  const ref = React49.useRef(null);
+  const {
+    optionProps,
+    isSelected,
+    isDisabled,
+    isFocused,
+    labelProps,
+    descriptionProps
+  } = reactAria.useOption({ key: item.key }, state2, ref);
+  const styles2 = react.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__namespace.default.createElement(OptionContext.Provider, { value: { labelProps, descriptionProps } }, /* @__PURE__ */ React49__namespace.default.createElement(react.ListItem, { ...optionProps, ...dataFields, ref, sx: styles2.item }, item.rendered));
+}
+function ListBoxSection({ section, state: state2 }) {
+  const { itemProps, headingProps, groupProps } = reactAria.useListBoxSection({
+    heading: section.rendered,
+    "aria-label": section["aria-label"]
+  });
+  const isFirstSection = section.key !== state2.collection.getFirstKey();
+  const titleBackgroundColor = react.useColorModeValue("platinum", "dimGrey");
+  const titleColor = react.useColorModeValue("darkGrey", "white");
+  return /* @__PURE__ */ React49__namespace.default.createElement(react.ListItem, { ...itemProps }, section.rendered && /* @__PURE__ */ React49__namespace.default.createElement(
+    react.Box,
+    {
+      textStyle: "xs",
+      backgroundColor: titleBackgroundColor,
+      color: titleColor,
+      paddingX: 3,
+      paddingY: 1,
+      marginTop: isFirstSection ? 0 : 0,
+      ...headingProps
+    },
+    section.rendered
+  ), /* @__PURE__ */ React49__namespace.default.createElement(react.List, { ...groupProps, padding: 0, listStyleType: "none" }, [...state2.collection.getChildren(section.key)].map((item) => /* @__PURE__ */ React49__namespace.default.createElement(Option, { key: item.key, item, state: state2 }))));
+}
+exports.SelectItem = void 0; exports.SelectItemLabel = void 0; exports.SelectItemDescription = void 0; var OptionContext, useOptionContext;
+var init_ListBox = __esm({
+  "src/input/ListBox.tsx"() {
+    exports.SelectItem = reactStately.Item;
+    exports.SelectItemLabel = ItemLabel;
+    exports.SelectItemDescription = ItemDescription;
+    OptionContext = React49__namespace.default.createContext({
+      labelProps: {},
+      descriptionProps: {}
+    });
+    useOptionContext = () => {
+      return React49.useContext(OptionContext);
+    };
+  }
+});
+function InfoSelect({
+  placeholder,
+  width = "100%",
+  height = "auto",
+  onChange,
+  value,
+  isLabelSrOnly,
+  defaultValue,
+  ...props
+}) {
+  const renamedProps = {
+    onSelectionChange: onChange,
+    selectedKey: value,
+    defaultSelectedKey: defaultValue,
+    ...props
+  };
+  const state2 = reactStately.useSelectState(renamedProps);
+  const triggerRef = React49.useRef(null);
+  const listboxRef = React49.useRef(null);
+  const { labelProps, triggerProps, valueProps, menuProps } = reactAria.useSelect(
+    renamedProps,
+    state2,
+    triggerRef
+  );
+  const styles2 = react.useMultiStyleConfig("InfoSelect", {
+    isOpen: state2.isOpen,
+    isLabelSrOnly
+  });
+  const { buttonProps } = reactAria.useButton(triggerProps, triggerRef);
+  const { t: t2 } = useTranslation();
+  const formControl = react.useFormControlProps(props);
+  return /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { sx: styles2.container }, /* @__PURE__ */ React49__namespace.default.createElement(react.chakra.div, { ...labelProps, sx: styles2.label }, props.label), /* @__PURE__ */ React49__namespace.default.createElement(
+    reactAria.HiddenSelect,
+    {
+      state: state2,
+      triggerRef,
+      label: props.label,
+      name: props.name
+    }
+  ), /* @__PURE__ */ React49__namespace.default.createElement(
+    react.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__namespace.default.createElement(react.Box, { ...valueProps }, state2.selectedItem ? state2.selectedItem.textValue ?? state2.selectedItem.rendered : placeholder ?? t2(texts10.selectAnOption)),
+    /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { sx: styles2.arrowIcon }, state2.isOpen ? /* @__PURE__ */ React49__namespace.default.createElement(sporIconReact.DropdownUpFill24Icon, null) : /* @__PURE__ */ React49__namespace.default.createElement(sporIconReact.DropdownDownFill24Icon, null))
+  ), state2.isOpen && /* @__PURE__ */ React49__namespace.default.createElement(Popover3, { state: state2, triggerRef }, /* @__PURE__ */ React49__namespace.default.createElement(
+    ListBox,
+    {
+      ...menuProps,
+      state: state2,
+      listBoxRef: listboxRef,
+      borderBottomRadius: "sm"
+    },
+    props.children
+  )));
+}
+var texts10;
+var init_InfoSelect = __esm({
+  "src/input/InfoSelect.tsx"() {
+    init_src();
+    init_ListBox();
+    init_Popover();
+    texts10 = createTexts({
+      selectAnOption: {
+        nb: "Velg et alternativ",
+        nn: "Velg eit alternativ",
+        sv: "V\xE4lj ett alternativ",
+        en: "Choose an option"
+      }
+    });
+  }
+});
+exports.Input = void 0;
+var init_Input = __esm({
+  "src/input/Input.tsx"() {
+    exports.Input = react.forwardRef(
+      ({ label, leftIcon, rightIcon, id, ...props }, ref) => {
+        const formControlProps = react.useFormControlContext();
+        const fallbackId = `input-${React49.useId()}`;
+        const inputId = id ?? (formControlProps == null ? void 0 : formControlProps.id) ?? fallbackId;
+        return /* @__PURE__ */ React49__namespace.default.createElement(react.InputGroup, { position: "relative" }, leftIcon && /* @__PURE__ */ React49__namespace.default.createElement(react.InputLeftElement, null, leftIcon), /* @__PURE__ */ React49__namespace.default.createElement(
+          react.Input,
+          {
+            "data-attachable": true,
+            paddingLeft: leftIcon ? 7 : void 0,
+            paddingRight: rightIcon ? 7 : void 0,
+            ...props,
+            id: inputId,
+            ref,
+            placeholder: " "
+          }
+        ), /* @__PURE__ */ React49__namespace.default.createElement(react.FormLabel, { htmlFor: inputId, pointerEvents: "none" }, label), rightIcon && /* @__PURE__ */ React49__namespace.default.createElement(react.InputRightElement, null, rightIcon));
+      }
+    );
+  }
+});
+exports.InputLeftElement = void 0; exports.InputRightElement = void 0;
+var init_InputElement = __esm({
+  "src/input/InputElement.tsx"() {
+    exports.InputLeftElement = react.forwardRef(
+      (props, ref) => /* @__PURE__ */ React49__namespace.default.createElement(react.InputLeftElement, { ...props, ref })
+    );
+    exports.InputRightElement = react.forwardRef(
+      (props, ref) => /* @__PURE__ */ React49__namespace.default.createElement(react.InputRightElement, { ...props, ref })
+    );
+  }
+});
+exports.NativeSelect = void 0;
+var init_NativeSelect = __esm({
+  "src/input/NativeSelect.tsx"() {
+    init_input();
+    exports.NativeSelect = react.forwardRef(
+      ({ label, ...props }, ref) => {
+        const styles2 = react.useMultiStyleConfig("Select", props);
+        return /* @__PURE__ */ React49__namespace.default.createElement(exports.FormControl, null, /* @__PURE__ */ React49__namespace.default.createElement(
+          react.Select,
+          {
+            "data-attachable": true,
+            ...props,
+            rootProps: { __css: styles2.root },
+            ref
+          }
+        ), label && /* @__PURE__ */ React49__namespace.default.createElement(exports.FormLabel, null, label));
+      }
+    );
+  }
+});
 var colors;
 var init_colors = __esm({
   "src/theme/foundations/colors.ts"() {
@@ -4791,7 +5204,7 @@ function NumericStepper({
     VerySmallButton,
     {
       icon: /* @__PURE__ */ React49__namespace.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
@@ -4849,14 +5262,14 @@ function NumericStepper({
     VerySmallButton,
     {
       icon: /* @__PURE__ */ React49__namespace.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
     }
   ));
 }
-var VerySmallButton, SubtractIcon, AddIcon, texts10;
+var VerySmallButton, SubtractIcon, AddIcon, texts11;
 var init_NumericStepper = __esm({
   "src/input/NumericStepper.tsx"() {
     init_src();
@@ -4935,7 +5348,7 @@ var init_NumericStepper = __esm({
         }
       )
     );
-    texts10 = createTexts({
+    texts11 = createTexts({
       decrementButtonAriaLabel: {
         nb: "Trekk fra 1",
         en: "Subtract 1",
@@ -4951,270 +5364,6 @@ var init_NumericStepper = __esm({
     });
   }
 });
-exports.FormControl = void 0;
-var init_FormControl = __esm({
-  "src/input/FormControl.tsx"() {
-    exports.FormControl = react.forwardRef((props, ref) => {
-      return /* @__PURE__ */ React49__namespace.default.createElement(react.FormControl, { ...props, ref });
-    });
-  }
-});
-exports.FormErrorMessage = void 0; var Arrow;
-var init_FormErrorMessage = __esm({
-  "src/input/FormErrorMessage.tsx"() {
-    exports.FormErrorMessage = ({
-      children,
-      ...boxProps
-    }) => {
-      const formControlContext = react.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__namespace.default.createElement(react.Box, { position: "relative", ref }, /* @__PURE__ */ React49__namespace.default.createElement(
-        react.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__namespace.default.createElement(Arrow, { position: "absolute", top: "-0.25em", left: "1em" }),
-        children
-      ));
-    };
-    Arrow = (props) => {
-      return /* @__PURE__ */ React49__namespace.default.createElement(
-        react.Box,
-        {
-          ...props,
-          as: "svg",
-          width: "16",
-          height: "16",
-          viewBox: "0 0 16 16",
-          fill: "none",
-          transform: "rotate(45deg)"
-        },
-        /* @__PURE__ */ React49__namespace.default.createElement(
-          react.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"
-          }
-        )
-      );
-    };
-  }
-});
-exports.FormLabel = void 0;
-var init_FormLabel = __esm({
-  "src/input/FormLabel.tsx"() {
-    exports.FormLabel = react.forwardRef((props, ref) => {
-      return /* @__PURE__ */ React49__namespace.default.createElement(react.FormLabel, { ...props, ref });
-    });
-  }
-});
-function SelectItemLabel({ children }) {
-  let { labelProps } = useOptionContext();
-  const styles2 = react.useMultiStyleConfig("ListBox", {});
-  return /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { ...labelProps, sx: styles2.label }, children);
-}
-function SelectItemDescription({
-  children
-}) {
-  let { descriptionProps } = useOptionContext();
-  const styles2 = react.useMultiStyleConfig("ListBox", {});
-  return /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { ...descriptionProps, sx: styles2.description }, children);
-}
-exports.ListBox = void 0; var OptionContext, useOptionContext, Option;
-var init_ListBox = __esm({
-  "src/input/ListBox.tsx"() {
-    exports.ListBox = react.forwardRef((props, ref) => {
-      const { state: state2, listBoxOptions, ...rest } = props;
-      const styles2 = react.useMultiStyleConfig("ListBox", {});
-      const internalRef = React49.useRef(null);
-      const listBoxRef = ref ?? internalRef;
-      const { listBoxProps } = reactAria.useListBox(listBoxOptions, state2, listBoxRef);
-      return /* @__PURE__ */ React49__namespace.default.createElement(
-        react.Box,
-        {
-          as: "ul",
-          ...listBoxProps,
-          sx: styles2.container,
-          ref: listBoxRef,
-          ...rest
-        },
-        Array.from(state2.collection).map((item) => /* @__PURE__ */ React49__namespace.default.createElement(Option, { key: item.key, item, state: state2 }))
-      );
-    });
-    OptionContext = React49__namespace.default.createContext({
-      labelProps: {},
-      descriptionProps: {}
-    });
-    useOptionContext = () => {
-      return React49.useContext(OptionContext);
-    };
-    Option = ({ item, state: state2 }) => {
-      const ref = React49.useRef(null);
-      const styles2 = react.useMultiStyleConfig("ListBox", {});
-      const { optionProps, labelProps, descriptionProps } = reactAria.useOption(
-        { key: item.key },
-        state2,
-        ref
-      );
-      return /* @__PURE__ */ React49__namespace.default.createElement(react.chakra.li, { ...optionProps, ref, sx: styles2.item }, /* @__PURE__ */ React49__namespace.default.createElement(OptionContext.Provider, { value: { labelProps, descriptionProps } }, item.rendered));
-    };
-  }
-});
-function InfoSelect({
-  placeholder,
-  width = "100%",
-  height = "auto",
-  onChange,
-  value,
-  isLabelSrOnly,
-  defaultValue,
-  ...props
-}) {
-  const renamedProps = {
-    onSelectionChange: onChange,
-    selectedKey: value,
-    defaultSelectedKey: defaultValue,
-    ...props
-  };
-  const state2 = reactStately.useSelectState(renamedProps);
-  const triggerRef = React49.useRef(null);
-  const { labelProps, triggerProps, valueProps, menuProps } = reactAria.useSelect(
-    renamedProps,
-    state2,
-    triggerRef
-  );
-  const styles2 = react.useMultiStyleConfig("InfoSelect", {
-    isOpen: state2.isOpen,
-    isLabelSrOnly
-  });
-  const { buttonProps } = reactAria.useButton(triggerProps, triggerRef);
-  const { t: t2 } = useTranslation();
-  const formControl = react.useFormControlProps(props);
-  return /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { sx: styles2.container }, /* @__PURE__ */ React49__namespace.default.createElement(react.chakra.div, { ...labelProps, sx: styles2.label }, props.label), /* @__PURE__ */ React49__namespace.default.createElement(
-    reactAria.HiddenSelect,
-    {
-      state: state2,
-      triggerRef,
-      label: props.label,
-      name: props.name
-    }
-  ), /* @__PURE__ */ React49__namespace.default.createElement(
-    react.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__namespace.default.createElement(react.Box, { ...valueProps }, state2.selectedItem ? state2.selectedItem.textValue ?? state2.selectedItem.rendered : placeholder ?? t2(texts11.selectAnOption)),
-    /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { sx: styles2.arrowIcon }, state2.isOpen ? /* @__PURE__ */ React49__namespace.default.createElement(sporIconReact.DropdownUpFill24Icon, null) : /* @__PURE__ */ React49__namespace.default.createElement(sporIconReact.DropdownDownFill24Icon, null))
-  ), state2.isOpen && /* @__PURE__ */ React49__namespace.default.createElement(Popover3, { state: state2, triggerRef }, /* @__PURE__ */ React49__namespace.default.createElement(
-    exports.ListBox,
-    {
-      listBoxOptions: menuProps,
-      state: state2,
-      borderBottomRadius: "sm"
-    }
-  )));
-}
-var texts11;
-var init_InfoSelect = __esm({
-  "src/input/InfoSelect.tsx"() {
-    init_src();
-    init_ListBox();
-    init_Popover();
-    texts11 = createTexts({
-      selectAnOption: {
-        nb: "Velg et alternativ",
-        nn: "Velg eit alternativ",
-        sv: "V\xE4lj ett alternativ",
-        en: "Choose an option"
-      }
-    });
-  }
-});
-exports.Input = void 0;
-var init_Input = __esm({
-  "src/input/Input.tsx"() {
-    exports.Input = react.forwardRef(
-      ({ label, leftIcon, rightIcon, id, ...props }, ref) => {
-        const formControlProps = react.useFormControlContext();
-        const fallbackId = `input-${React49.useId()}`;
-        const inputId = id ?? (formControlProps == null ? void 0 : formControlProps.id) ?? fallbackId;
-        return /* @__PURE__ */ React49__namespace.default.createElement(react.InputGroup, { position: "relative" }, leftIcon && /* @__PURE__ */ React49__namespace.default.createElement(react.InputLeftElement, null, leftIcon), /* @__PURE__ */ React49__namespace.default.createElement(
-          react.Input,
-          {
-            "data-attachable": true,
-            paddingLeft: leftIcon ? 7 : void 0,
-            paddingRight: rightIcon ? 7 : void 0,
-            ...props,
-            id: inputId,
-            ref,
-            placeholder: " "
-          }
-        ), /* @__PURE__ */ React49__namespace.default.createElement(react.FormLabel, { htmlFor: inputId, pointerEvents: "none" }, label), rightIcon && /* @__PURE__ */ React49__namespace.default.createElement(react.InputRightElement, null, rightIcon));
-      }
-    );
-  }
-});
-exports.InputLeftElement = void 0; exports.InputRightElement = void 0;
-var init_InputElement = __esm({
-  "src/input/InputElement.tsx"() {
-    exports.InputLeftElement = react.forwardRef(
-      (props, ref) => /* @__PURE__ */ React49__namespace.default.createElement(react.InputLeftElement, { ...props, ref })
-    );
-    exports.InputRightElement = react.forwardRef(
-      (props, ref) => /* @__PURE__ */ React49__namespace.default.createElement(react.InputRightElement, { ...props, ref })
-    );
-  }
-});
-exports.NativeSelect = void 0;
-var init_NativeSelect = __esm({
-  "src/input/NativeSelect.tsx"() {
-    init_input();
-    exports.NativeSelect = react.forwardRef(
-      ({ label, ...props }, ref) => {
-        const styles2 = react.useMultiStyleConfig("Select", props);
-        return /* @__PURE__ */ React49__namespace.default.createElement(exports.FormControl, null, /* @__PURE__ */ React49__namespace.default.createElement(
-          react.Select,
-          {
-            "data-attachable": true,
-            ...props,
-            rootProps: { __css: styles2.root },
-            ref
-          }
-        ), label && /* @__PURE__ */ React49__namespace.default.createElement(exports.FormLabel, null, label));
-      }
-    );
-  }
-});
 exports.PasswordInput = void 0; var texts12;
 var init_PasswordInput = __esm({
   "src/input/PasswordInput.tsx"() {
@@ -11904,7 +12053,7 @@ var init_CountryCodeSelect = __esm({
           items: callingCodes,
           ...props
         },
-        (item) => /* @__PURE__ */ React49__namespace.default.createElement(reactStately.Item, { key: item.key }, item.key)
+        (item) => /* @__PURE__ */ React49__namespace.default.createElement(exports.SelectItem, { key: item.key }, item.key)
       );
     };
     CountryCodeSelect_default = CountryCodeSelect;
@@ -11946,7 +12095,7 @@ var init_PhoneNumberInput = __esm({
                 height: "100%",
                 value: "+47"
               },
-              /* @__PURE__ */ React49__namespace.default.createElement(reactStately.Item, { key: "+47" }, "+47")
+              /* @__PURE__ */ React49__namespace.default.createElement(exports.SelectItem, { key: "+47" }, "+47")
             )
           },
           /* @__PURE__ */ React49__namespace.default.createElement(
@@ -12157,11 +12306,12 @@ var init_Textarea = __esm({
 var init_input = __esm({
   "src/input/index.tsx"() {
     init_AttachedInputs();
+    init_Autosuggest();
     init_CardSelect();
     init_Checkbox();
     init_CheckboxGroup();
     init_ChoiceChip();
-    init_NumericStepper();
+    init_Combobox();
     init_FormControl();
     init_FormErrorMessage();
     init_FormLabel();
@@ -12170,6 +12320,7 @@ var init_input = __esm({
     init_InputElement();
     init_ListBox();
     init_NativeSelect();
+    init_NumericStepper();
     init_PasswordInput();
     init_PhoneNumberInput();
     init_Radio();
@@ -21009,19 +21160,19 @@ var init_listbox = __esm({
           },
           _focus: {
             outline: "none",
-            background: themeTools.mode("mint", "darkTeal")(props)
+            backgroundColor: themeTools.mode("mint", "darkTeal")(props)
           },
           _selected: {
-            background: themeTools.mode("pine", "pine")(props),
+            backgroundColor: themeTools.mode("pine", "pine")(props),
             color: themeTools.mode("white", "white")(props)
           }
         },
         label: {},
         description: {
           fontSize: ["mobile.xs", "desktop.xs"],
-          color: "dimGrey",
+          color: themeTools.mode("dimGrey", "silver")(props),
           "[aria-selected='true'] &": {
-            color: "lightGrey"
+            color: themeTools.mode("lightGrey", "platinum")(props)
           }
         }
       })
@@ -23059,18 +23210,25 @@ Object.defineProperty(exports, 'Time', {
   enumerable: true,
   get: function () { return date.Time; }
 });
-Object.defineProperty(exports, 'SelectItem', {
+Object.defineProperty(exports, 'Item', {
   enumerable: true,
   get: function () { return reactStately.Item; }
 });
+Object.defineProperty(exports, 'Section', {
+  enumerable: true,
+  get: function () { return reactStately.Section; }
+});
 exports.tokens = tokens10__namespace;
+exports.Autosuggest = Autosuggest;
+exports.Combobox = Combobox;
 exports.DatePicker = DatePicker;
 exports.DateRangePicker = DateRangePicker;
 exports.DrawerHeader = exports.ModalHeader;
 exports.InfoSelect = InfoSelect;
+exports.ItemDescription = ItemDescription;
+exports.ItemLabel = ItemLabel;
 exports.LanguageProvider = LanguageProvider;
+exports.ListBox = ListBox;
 exports.NumericStepper = NumericStepper;
-exports.SelectItemDescription = SelectItemDescription;
-exports.SelectItemLabel = SelectItemLabel;
 exports.createTexts = createTexts;
 exports.useTranslation = useTranslation;