@vygruppen/spor-react 12.22.1 → 12.23.0

package/dist/index.mjs

@@ -1,15 +1,15 @@
-import { useSlotRecipe, Accordion as Accordion$1, Stack, Box, HStack, Progress, defineRecipe, chakra, Text, useRecipe, Circle, Skeleton as Skeleton$1, Button as Button$1, Group, Badge as Badge$1, Code as Code$1, Clipboard as Clipboard$1, IconButton as IconButton$1, useDisclosure, Alert as Alert$1, Span, Flex, Breadcrumb as Breadcrumb$1, RadioCard as RadioCard$1, Separator as Separator$1, ClientOnly, Field, defineStyle, PopoverAnchor, useFieldContext, Popover as Popover$1, Portal, Dialog, createContext as createContext$1, useDialogContext, Drawer as Drawer$1, InputElement, Input as Input$1, Combobox, useComboboxContext, usePopoverContext, Checkbox as Checkbox$1, CheckboxCard, Fieldset as Fieldset$1, NativeSelect as NativeSelect$1, useControllableState, createListCollection, RadioGroup as RadioGroup$1, Select as Select$1, useSelectContext, Switch as Switch$1, Textarea as Textarea$1, Link, List as List$1, Center, PopoverCloseTrigger, Pagination as Pagination$1, usePaginationContext, createToaster, Tabs as Tabs$1, Table as Table$1, defineSemanticTokens, defineSlotRecipe, defineTokens, defineAnimationStyles, defineGlobalStyles, defineTextStyles, createSystem, defaultBaseConfig, Tooltip as Tooltip$1, VisuallyHidden, defineConfig, useFilter, useListCollection, CheckboxGroup as CheckboxGroup$1, ListItem, ChakraProvider, Toaster as Toaster$1, Toast } from '@chakra-ui/react';
-export { AspectRatio, Box, BreadcrumbCurrentLink, BreadcrumbEllipsis, BreadcrumbLink, Center, ClientOnly, Collapsible, Container, Em, Flex, For, FormatByte, FormatNumber, Grid, GridItem, HStack, Icon, Image, Kbd, LocaleProvider, Portal, Show, SimpleGrid, Spacer, Span, Stack, TableBody, TableCaption, TableCell, TableColumn, TableColumnGroup, TableColumnHeader, TableFooter, TableHeader, TableRoot, TableRow, VStack, VisuallyHidden, Wrap, createIcon, createListCollection, createSystem, defineConfig, defineRecipe, defineStyle, chakra as spor, useBreakpointValue, useCheckbox, useClipboard, useControllableProp, useDisclosure, useMediaQuery, useRecipe, useSlotRecipe, useToken } from '@chakra-ui/react';
+import { useSlotRecipe, Accordion as Accordion$1, Stack, Box, HStack, Progress, defineRecipe, chakra, Text, useRecipe, Circle, Skeleton as Skeleton$1, Button as Button$1, Group, Badge as Badge$1, Code as Code$1, Clipboard as Clipboard$1, IconButton as IconButton$1, useDisclosure, Alert as Alert$1, Span, Flex, Breadcrumb as Breadcrumb$1, RadioCard as RadioCard$1, Separator as Separator$1, ClientOnly, Field, defineStyle, PopoverAnchor, useFieldContext, Popover as Popover$1, Portal, Dialog, createContext as createContext$1, useDialogContext, Drawer as Drawer$1, InputElement, Input as Input$1, Combobox, useComboboxContext, usePopoverContext, Checkbox as Checkbox$1, CheckboxCard, Fieldset as Fieldset$1, NativeSelect as NativeSelect$1, useControllableState, createListCollection, RadioGroup as RadioGroup$1, Select as Select$1, useSelectContext, Switch as Switch$1, Textarea as Textarea$1, Link, List as List$1, Center, PopoverCloseTrigger, Pagination as Pagination$1, usePaginationContext, createToaster, Tabs as Tabs$1, Table as Table$1, defineSemanticTokens, defineSlotRecipe, defineTokens, defineAnimationStyles, defineGlobalStyles, defineTextStyles, createSystem, defaultBaseConfig, Tooltip as Tooltip$1, VisuallyHidden as VisuallyHidden$1, defineConfig, useFilter, useListCollection, useCombobox, CheckboxGroup as CheckboxGroup$1, ListItem, ChakraProvider, Toaster as Toaster$1, Toast } from '@chakra-ui/react';
+export { AspectRatio, Box, BreadcrumbCurrentLink, BreadcrumbEllipsis, BreadcrumbLink, Center, ClientOnly, Collapsible, Container, Em, Flex, For, FormatByte, FormatNumber, Grid, GridItem, HStack, Icon, Image, Kbd, LocaleProvider, Portal, Show, SimpleGrid, Spacer, Span, Stack, TableCaption, TableCell, TableColumn, TableColumnGroup, TableFooter, TableHeader, TableRoot, VStack, VisuallyHidden, Wrap, createIcon, createListCollection, createSystem, defineConfig, defineRecipe, defineStyle, chakra as spor, useBreakpointValue, useCheckbox, useClipboard, useControllableProp, useDisclosure, useMediaQuery, useRecipe, useSlotRecipe, useToken } from '@chakra-ui/react';
 import * as spor_icon_react_star from '@vygruppen/spor-icon-react';
-import { DropdownDownFill24Icon, CopyOutline18Icon, CheckmarkFill18Icon, CloseFill18Icon, CloseFill30Icon, CloseFill24Icon, InformationFill24Icon, ServiceFill24Icon, QuestionFill24Icon, ErrorOutline24Icon, ErrorFill24Icon, AltTransportFill24Icon, WarningFill24Icon, SuccessFill24Icon, DropdownDownFill18Icon, DropdownRightFill18Icon, CalendarOutline24Icon, ArrowLeftFill24Icon, ChangeDirectionOutline24Icon, CloseOutline24Icon, SearchOutline24Icon, Forward15MediaControllerFill30Icon, Backward15MediaControllerFill30Icon, PauseMediaControllerFill24Icon, PlayMediaControllerFill24Icon, NextMediaControllerFill30Icon, PreviousMediaControllerFill30Icon, ArrowRightFill18Icon, DropdownLeftOutline18Icon, DropdownRightOutline18Icon, WalkFill30Icon, WalkFill24Icon, WalkFill18Icon, AltTransportFill30Icon, AltTransportFill18Icon, TramFill30Icon, TramFill24Icon, TramFill18Icon, SubwayFill30Icon, SubwayFill24Icon, SubwayFill18Icon, FerryFill30Icon, FerryFill24Icon, FerryFill18Icon, BusFill30Icon, BusFill24Icon, BusFill18Icon, ExpressBusFill30Icon, ExpressBusFill24Icon, ExpressBusFill18Icon, TrainFill30Icon, TrainFill24Icon, TrainFill18Icon, InformationFill18Icon, WarningFill18Icon, ErrorFill18Icon, LinkOutOutline24Icon, LinkOutOutline18Icon, ArrowLeftOutline24Icon, ArrowRightOutline24Icon, DropdownLeftFill18Icon } from '@vygruppen/spor-icon-react';
+import { DropdownDownFill24Icon, CopyOutline18Icon, CheckmarkFill18Icon, CloseFill18Icon, CloseFill30Icon, CloseFill24Icon, InformationFill24Icon, ServiceFill24Icon, QuestionFill24Icon, ErrorOutline24Icon, ErrorFill24Icon, AltTransportFill24Icon, WarningFill24Icon, SuccessFill24Icon, DropdownDownFill18Icon, DropdownRightFill18Icon, CalendarOutline24Icon, ArrowLeftFill24Icon, ChangeDirectionOutline24Icon, CloseOutline24Icon, SearchOutline24Icon, Forward15MediaControllerFill30Icon, Backward15MediaControllerFill30Icon, PauseMediaControllerFill24Icon, PlayMediaControllerFill24Icon, NextMediaControllerFill30Icon, PreviousMediaControllerFill30Icon, ArrowRightFill18Icon, DropdownLeftOutline18Icon, DropdownRightOutline18Icon, DropdownUpFill18Icon, WalkFill30Icon, WalkFill24Icon, WalkFill18Icon, AltTransportFill30Icon, AltTransportFill18Icon, TramFill30Icon, TramFill24Icon, TramFill18Icon, SubwayFill30Icon, SubwayFill24Icon, SubwayFill18Icon, FerryFill30Icon, FerryFill24Icon, FerryFill18Icon, BusFill30Icon, BusFill24Icon, BusFill18Icon, ExpressBusFill30Icon, ExpressBusFill24Icon, ExpressBusFill18Icon, TrainFill30Icon, TrainFill24Icon, TrainFill18Icon, InformationFill18Icon, WarningFill18Icon, ErrorFill18Icon, LinkOutOutline24Icon, LinkOutOutline18Icon, ArrowLeftOutline24Icon, ArrowRightOutline24Icon, DropdownLeftFill18Icon } from '@vygruppen/spor-icon-react';
 import * as React20 from 'react';
-import React20__default, { forwardRef, createContext, useId, cloneElement, useRef, useImperativeHandle, useMemo, isValidElement, useState, useEffect, useLayoutEffect, useContext } from 'react';
+import React20__default, { forwardRef, createContext, useId, cloneElement, useRef, useImperativeHandle, useMemo, isValidElement, useState, useEffect, useContext, Children, useLayoutEffect } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { spinnerColorData, inlineLoaderColorData, contentLoaderData, fullScreenLoaderWhiteData, inlineLoaderDarkData, spinnerLightData, spinnerDarkData, fullScreenLoaderBlackData, inlineLoaderLightData } from '@vygruppen/spor-loader';
 import ReactLottie from 'lottie-react';
 import { useInterval } from 'usehooks-ts';
 export { useIsClient, useMap, useOnClickOutside } from 'usehooks-ts';
-import { useProgressBar, useDateSegment, useDateField, useDatePicker, I18nProvider, usePopover, DismissButton, Overlay, useCalendar as useCalendar$1, useCalendarGrid, useCalendarCell, useButton, useRangeCalendar, useFocusRing, mergeProps, useDateFormatter, VisuallyHidden as VisuallyHidden$1, useId as useId$1, useDateRangePicker, useFilter as useFilter$1, useComboBox, useListBox, useOption, useListBoxSection, useTimeField } from 'react-aria';
+import { useProgressBar, VisuallyHidden, useDateSegment, useDateField, useDatePicker, I18nProvider, usePopover, DismissButton, Overlay, useCalendar as useCalendar$1, useCalendarGrid, useCalendarCell, useButton, useRangeCalendar, useFocusRing, mergeProps, useDateFormatter, useId as useId$1, useDateRangePicker, useFilter as useFilter$1, useComboBox, useListBox, useOption, useListBoxSection, useTimeField } from 'react-aria';
 import { GregorianCalendar, createCalendar, getLocalTimeZone, endOfMonth, getWeeksInMonth, isSameMonth, isToday, toCalendarDate, isSameDay, parseTime } from '@internationalized/date';
 export { Time } from '@internationalized/date';
 import { useDateFieldState, useDatePickerState, useCalendarState, useRangeCalendarState, useDateRangePickerState, useTimeFieldState, useComboBoxState } from 'react-stately';
@@ -194,7 +194,7 @@ var ColorInlineLoader = ({
 }) => {
   return /* @__PURE__ */ jsxs(Center, { role: "status", "aria-live": "polite", ...props, children: [
     /* @__PURE__ */ jsx(Box, { width, maxWidth, children: /* @__PURE__ */ jsx(ClientOnly, { children: /* @__PURE__ */ jsx(Lottie, { animationData: inlineLoaderColorData }) }) }),
-    /* @__PURE__ */ jsx(VisuallyHidden, { children: "Loading..." })
+    /* @__PURE__ */ jsx(VisuallyHidden$1, { children: "Loading..." })
   ] });
 };
 var ColorSpinner = ({
@@ -205,14 +205,14 @@ var ColorSpinner = ({
 }) => {
   return /* @__PURE__ */ jsxs(Center, { flexDirection: "column", role: "status", "aria-live": "polite", ...props, children: [
     /* @__PURE__ */ jsx(Box, { width, maxWidth, children: /* @__PURE__ */ jsx(ClientOnly, { children: /* @__PURE__ */ jsx(Lottie, { animationData: spinnerColorData }) }) }),
-    /* @__PURE__ */ jsx(VisuallyHidden, { children: "Loading..." }),
+    /* @__PURE__ */ jsx(VisuallyHidden$1, { children: "Loading..." }),
     children && /* @__PURE__ */ jsx(Box, { marginTop: 3, fontWeight: "bold", children })
   ] });
 };
 var ContentLoader = ({ children, ...props }) => {
   return /* @__PURE__ */ jsxs(Box, { role: "status", "aria-live": "polite", ...props, children: [
     /* @__PURE__ */ jsx(Box, { maxWidth: "140px", marginX: "auto", children: /* @__PURE__ */ jsx(ClientOnly, { children: /* @__PURE__ */ jsx(Lottie, { animationData: contentLoaderData }) }) }),
-    /* @__PURE__ */ jsx(VisuallyHidden, { children: "Loading..." }),
+    /* @__PURE__ */ jsx(VisuallyHidden$1, { children: "Loading..." }),
     children && /* @__PURE__ */ jsx(Box, { textAlign: "center", fontWeight: "bold", children })
   ] });
 };
@@ -232,7 +232,7 @@ var DarkFullScreenLoader = ({
       ...props,
       children: [
         /* @__PURE__ */ jsx(Box, { width, maxWidth, children: /* @__PURE__ */ jsx(ClientOnly, { children: /* @__PURE__ */ jsx(Lottie, { animationData: fullScreenLoaderWhiteData }) }) }),
-        /* @__PURE__ */ jsx(VisuallyHidden, { children: "Loading..." })
+        /* @__PURE__ */ jsx(VisuallyHidden$1, { children: "Loading..." })
       ]
     }
   );
@@ -244,7 +244,7 @@ var DarkInlineLoader = ({
 }) => {
   return /* @__PURE__ */ jsxs(Center, { role: "status", "aria-live": "polite", ...props, children: [
     /* @__PURE__ */ jsx(Box, { width, maxWidth, children: /* @__PURE__ */ jsx(ClientOnly, { children: /* @__PURE__ */ jsx(Lottie, { animationData: inlineLoaderDarkData }) }) }),
-    /* @__PURE__ */ jsx(VisuallyHidden, { children: "Loading..." })
+    /* @__PURE__ */ jsx(VisuallyHidden$1, { children: "Loading..." })
   ] });
 };
 var DarkSpinner = ({
@@ -257,7 +257,7 @@ var DarkSpinner = ({
   const spinnerData = colorMode === "dark" ? spinnerLightData : spinnerDarkData;
   return /* @__PURE__ */ jsxs(Center, { flexDirection: "column", role: "status", "aria-live": "polite", ...props, children: [
     /* @__PURE__ */ jsx(Box, { width, maxWidth, children: /* @__PURE__ */ jsx(ClientOnly, { children: /* @__PURE__ */ jsx(Lottie, { animationData: spinnerData }) }) }),
-    /* @__PURE__ */ jsx(VisuallyHidden, { children: "Loading..." }),
+    /* @__PURE__ */ jsx(VisuallyHidden$1, { children: "Loading..." }),
     children && /* @__PURE__ */ jsx(Box, { marginTop: 3, fontWeight: "bold", children })
   ] });
 };
@@ -268,7 +268,7 @@ var LightFullScreenLoader = ({
 }) => {
   return /* @__PURE__ */ jsxs(Center, { height: "100%", role: "status", "aria-live": "polite", ...props, children: [
     /* @__PURE__ */ jsx(Box, { width, maxWidth, children: /* @__PURE__ */ jsx(ClientOnly, { children: /* @__PURE__ */ jsx(Lottie, { animationData: fullScreenLoaderBlackData }) }) }),
-    /* @__PURE__ */ jsx(VisuallyHidden, { children: "Loading..." })
+    /* @__PURE__ */ jsx(VisuallyHidden$1, { children: "Loading..." })
   ] });
 };
 var LightInlineLoader = ({
@@ -278,7 +278,7 @@ var LightInlineLoader = ({
 }) => {
   return /* @__PURE__ */ jsxs(Center, { height: "100%", role: "status", "aria-live": "polite", ...props, children: [
     /* @__PURE__ */ jsx(Box, { width, maxWidth, children: /* @__PURE__ */ jsx(ClientOnly, { children: /* @__PURE__ */ jsx(Lottie, { animationData: inlineLoaderLightData }) }) }),
-    /* @__PURE__ */ jsx(VisuallyHidden, { children: "Loading..." })
+    /* @__PURE__ */ jsx(VisuallyHidden$1, { children: "Loading..." })
   ] });
 };
 var LightSpinner = ({
@@ -289,7 +289,7 @@ var LightSpinner = ({
 }) => {
   return /* @__PURE__ */ jsxs(Center, { flexDirection: "column", role: "status", "aria-live": "polite", ...props, children: [
     /* @__PURE__ */ jsx(Box, { width, maxWidth, children: /* @__PURE__ */ jsx(ClientOnly, { children: /* @__PURE__ */ jsx(Lottie, { animationData: spinnerLightData }) }) }),
-    /* @__PURE__ */ jsx(VisuallyHidden, { children: "Loading..." }),
+    /* @__PURE__ */ jsx(VisuallyHidden$1, { children: "Loading..." }),
     children && /* @__PURE__ */ jsx(Box, { marginTop: 3, fontWeight: "bold", children })
   ] });
 };
@@ -1023,7 +1023,10 @@ var useScrollDirection = () => {
 var AlertIcon = forwardRef(
   ({ variant, customIcon: CustomAlertIcon }, ref) => {
     const { t } = useTranslation();
-    return /* @__PURE__ */ jsx(Box, { ref, "aria-label": t(texts5[variant]), children: CustomAlertIcon ? /* @__PURE__ */ jsx(CustomAlertIcon, { color: `alert.${variant}.icon` }) : /* @__PURE__ */ jsx(BaseAlertIcon, { variant }) });
+    return /* @__PURE__ */ jsxs(Box, { ref, children: [
+      /* @__PURE__ */ jsx(VisuallyHidden, { children: t(texts5[variant]) }),
+      CustomAlertIcon ? /* @__PURE__ */ jsx(CustomAlertIcon, { color: `alert.${variant}.icon` }) : /* @__PURE__ */ jsx(BaseAlertIcon, { variant })
+    ] });
   }
 );
 AlertIcon.displayName = "AlertIcon";
@@ -1694,7 +1697,7 @@ function CalendarHeader({ dualView }) {
     state.focusNextPage();
   }
   return /* @__PURE__ */ jsxs(Flex, { flex: 1, alignItems: "center", paddingBottom: 4, children: [
-    /* @__PURE__ */ jsx(VisuallyHidden$1, { children: /* @__PURE__ */ jsx("h2", { children: calendarProps["aria-label"] }) }),
+    /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx("h2", { children: calendarProps["aria-label"] }) }),
     /* @__PURE__ */ jsx(
       IconButton,
       {
@@ -1899,12 +1902,12 @@ var floatingLabelStyles = defineStyle({
     opacity: 0.4
   },
   pos: "absolute",
-  transition: "position",
+  transition: "top 160ms ease, font-size 160ms ease",
   top: "0.9rem",
   color: "text",
   fontSize: ["mobile.sm", "desktop.sm"],
   "&[data-float]": {
-    fontSize: ["mobile.xs", "desktop.xs"],
+    fontSize: ["mobile.2xs", "desktop.2xs"],
     color: "text",
     top: "0.3rem"
   }
@@ -1978,7 +1981,7 @@ var Field3 = React20.forwardRef(
                 children: renderLabelWithIndicator(label, labelAsChild)
               }
             ),
-            errorText && /* @__PURE__ */ jsx(Field.ErrorText, { children: errorText })
+            errorText && /* @__PURE__ */ jsx(Field.ErrorText, { "aria-live": "polite", children: errorText })
           ]
         }
       ),
@@ -3103,7 +3106,7 @@ var SwitchButton = chakra(
   defineRecipe({
     base: {
       position: "absolute !important",
-      zIndex: "docked !important",
+      zIndex: "101 !important",
       // eslint-disable-next-line spor/use-semantic-tokens
       bg: "bg !important",
       outlineWidth: "1px !important",
@@ -3119,7 +3122,7 @@ var SwitchButton = chakra(
         },
         vertical: {
           top: "calc(50% - 15px)",
-          right: "12px",
+          right: "3rem",
           transform: "rotate(90deg)"
         }
       }
@@ -3214,6 +3217,7 @@ var Input = forwardRef(
     const recipe = useRecipe({ key: "input" });
     const [recipeProps, restProps] = recipe.splitVariantProps(props);
     const styles = recipe(recipeProps);
+    const labelId = useId();
     const inputRef = useRef(null);
     useImperativeHandle(ref, () => inputRef.current, []);
     const { shouldFloat, handleFocus, handleBlur, handleChange, isControlled } = useFloatingInputState({
@@ -3234,7 +3238,7 @@ var Input = forwardRef(
         errorText,
         id: props.id,
         labelAsChild,
-        label: /* @__PURE__ */ jsxs(Flex, { fontSize: fontSize ?? "mobile.md", children: [
+        label: /* @__PURE__ */ jsxs(Flex, { id: labelId, children: [
           /* @__PURE__ */ jsx(Box, { visibility: "hidden", children: startElement }),
           label
         ] }),
@@ -3246,6 +3250,7 @@ var Input = forwardRef(
             {
               pointerEvents: "none",
               paddingX: 2,
+              "aria-hidden": "true",
               fontSize: fontSize ?? "mobile.md",
               children: startElement
             }
@@ -3267,7 +3272,8 @@ var Input = forwardRef(
               onChange: handleChange,
               placeholder: "",
               css: styles,
-              fontSize: fontSize ?? "mobile.md"
+              fontSize: fontSize ?? "mobile.md",
+              "aria-labelledby": labelId
             }
           ),
           endElement && /* @__PURE__ */ jsx(
@@ -3298,6 +3304,9 @@ var Autocomplete = ({
   filteredExternally,
   loading,
   disabled,
+  emptyLabel,
+  openOnClick = true,
+  openOnFocus = true,
   ...rest
 }) => {
   const { contains } = useFilter({ sensitivity: "base" });
@@ -3318,50 +3327,52 @@ var Autocomplete = ({
     () => filterChildren(children, collection.items),
     [children, collection.items]
   );
-  return /* @__PURE__ */ jsxs(
-    Combobox.Root,
-    {
-      ...rest,
-      collection,
-      onInputValueChange: (event) => {
-        if (!filteredExternally) {
-          filter(event.inputValue);
-        }
-        onInputValueChange == null ? void 0 : onInputValueChange(event);
-      },
-      positioning: {
-        placement: "bottom",
-        offset: {
-          mainAxis: 3,
-          crossAxis: -1
-        },
-        flip: false
+  const combobox = useCombobox({
+    collection,
+    openOnClick,
+    onInputValueChange: (event) => {
+      if (!filteredExternally) {
+        filter(event.inputValue);
+      }
+      onInputValueChange == null ? void 0 : onInputValueChange(event);
+    },
+    positioning: {
+      placement: "bottom",
+      offset: {
+        mainAxis: 3,
+        crossAxis: -1
       },
-      disabled,
-      children: [
-        /* @__PURE__ */ jsxs(Combobox.Control, { children: [
-          /* @__PURE__ */ jsx(Combobox.Input, { asChild: true, children: /* @__PURE__ */ jsx(
-            Input,
-            {
-              label: /* @__PURE__ */ jsx(Combobox.Label, { children: label }),
-              variant,
-              labelAsChild: true,
-              startElement: leftIcon,
-              invalid,
-              helperText,
-              errorText,
-              required
-            }
-          ) }),
-          /* @__PURE__ */ jsx(Combobox.IndicatorGroup, { children: /* @__PURE__ */ jsx(Combobox.ClearTrigger, { asChild: true, children: /* @__PURE__ */ jsx(CloseButton, { size: "xs" }) }) })
-        ] }),
-        /* @__PURE__ */ jsx(Combobox.Positioner, { children: /* @__PURE__ */ jsxs(Combobox.Content, { children: [
-          /* @__PURE__ */ jsx(Combobox.Empty, { children: !loading && t(texts14.noItemsFound) }),
-          loading ? /* @__PURE__ */ jsx(ColorSpinner, { width: "1.5rem", p: "2" }) : /* @__PURE__ */ jsx(Fragment, { children: filteredChildren })
-        ] }) })
-      ]
-    }
-  );
+      flip: false
+    },
+    disabled,
+    ...rest
+  });
+  return /* @__PURE__ */ jsxs(Combobox.RootProvider, { value: combobox, children: [
+    /* @__PURE__ */ jsxs(Combobox.Control, { children: [
+      /* @__PURE__ */ jsx(Combobox.Input, { asChild: true, children: /* @__PURE__ */ jsx(
+        Input,
+        {
+          label: /* @__PURE__ */ jsx(Combobox.Label, { children: label }),
+          variant,
+          labelAsChild: true,
+          startElement: leftIcon,
+          invalid,
+          helperText,
+          errorText,
+          required,
+          onFocus: () => {
+            if (openOnFocus)
+              combobox.setOpen(true);
+          }
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Combobox.IndicatorGroup, { children: /* @__PURE__ */ jsx(Combobox.ClearTrigger, { asChild: true, "aria-label": t(texts14.clearValue), children: /* @__PURE__ */ jsx(CloseButton, { size: "xs" }) }) })
+    ] }),
+    /* @__PURE__ */ jsx(Combobox.Positioner, { children: /* @__PURE__ */ jsxs(Combobox.Content, { children: [
+      /* @__PURE__ */ jsx(Combobox.Empty, { children: !loading && (emptyLabel ?? t(texts14.noItemsFound)) }),
+      loading ? /* @__PURE__ */ jsx(ColorSpinner, { width: "1.5rem", p: "2" }) : /* @__PURE__ */ jsx(Fragment, { children: filteredChildren })
+    ] }) })
+  ] });
 };
 var AutocompleteItemGroup = Combobox.ItemGroup;
 var AutocompleteItemGroupLabel = Combobox.ItemGroupLabel;
@@ -3431,6 +3442,12 @@ var texts14 = createTexts({
     nn: "Ingen resultat",
     sv: "Inga resultat",
     en: "No results found"
+  },
+  clearValue: {
+    nb: "T\xF8m verdi",
+    nn: "T\xF8m verdi",
+    sv: "Rensa v\xE4rde",
+    en: "Clear value"
   }
 });
 var CardSelect = ({ size = "md", ...props }) => {
@@ -3996,7 +4013,6 @@ var NumericStepper = React20__default.forwardRef((props, ref) => {
     {
       css: styles.root,
       width: "auto",
-      id: idProperty,
       ref,
       label,
       helperText,
@@ -4021,8 +4037,7 @@ var NumericStepper = React20__default.forwardRef((props, ref) => {
                 focusOnAddButton();
               }
             },
-            disabled: disabled || value <= minValue,
-            id: value <= minValue ? void 0 : idProperty
+            disabled: disabled || value <= minValue
           }
         ),
         withInput ? /* @__PURE__ */ jsx(
@@ -4033,7 +4048,7 @@ var NumericStepper = React20__default.forwardRef((props, ref) => {
             name: nameProperty,
             value,
             disabled,
-            id: value === 0 ? void 0 : idProperty,
+            id: idProperty,
             css: styles.input,
             width: `${Math.max(value.toString().length + 1, 3)}ch`,
             "aria-live": "assertive",
@@ -4071,8 +4086,7 @@ var NumericStepper = React20__default.forwardRef((props, ref) => {
               )
             ),
             onClick: () => onChange(Math.min(value + clampedStepSize, maxValue)),
-            disabled: disabled || value >= maxValue,
-            id: value >= maxValue ? void 0 : idProperty
+            disabled: disabled || value >= maxValue
           }
         )
       ]
@@ -4277,6 +4291,7 @@ var CountryCodeSelect = forwardRef((props, ref) => {
       lazyMount: true,
       "aria-label": t(texts17.countryCode),
       sideRadiusVariant: "rightSideSquare",
+      role: "combobox",
       children: filteredCallingCodes.items.map((code) => /* @__PURE__ */ jsx(SelectItem, { item: code, children: code.label }, code.label))
     }
   );
@@ -4631,7 +4646,7 @@ var Textarea = forwardRef(
       errorText,
       readOnly,
       helperText,
-      floatingLabel,
+      floatingLabel = true,
       ...restProps
     } = props;
     const recipe = useRecipe({ key: "textarea" });
@@ -4647,7 +4662,8 @@ var Textarea = forwardRef(
       onChange: props.onChange,
       inputRef
     });
-    return /* @__PURE__ */ jsxs(
+    const labelId = useId();
+    return /* @__PURE__ */ jsx(
       Field3,
       {
         errorText,
@@ -4658,31 +4674,24 @@ var Textarea = forwardRef(
         floatingLabel,
         shouldFloat,
         position: "relative",
-        children: [
-          /* @__PURE__ */ jsx(
-            Textarea$1,
-            {
-              ...restProps,
-              css: styles,
-              className: "peer",
-              ref: inputRef,
-              value: isControlled ? props.value : void 0,
-              onFocus: handleFocus,
-              onBlur: handleBlur,
-              onChange: handleChange,
-              style: { "--label-height": `${labelHeight}px` },
-              placeholder: " "
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            FloatingLabel,
-            {
-              ref: labelRef,
-              "data-float": shouldFloat ? true : void 0,
-              children: label
-            }
-          )
-        ]
+        label: /* @__PURE__ */ jsx(Box, { id: labelId, "aria-hidden": true, children: /* @__PURE__ */ jsx("label", { ref: labelRef, children: label }) }),
+        id: restProps.id,
+        children: /* @__PURE__ */ jsx(
+          Textarea$1,
+          {
+            ...restProps,
+            css: styles,
+            className: "peer",
+            ref: inputRef,
+            value: isControlled ? props.value : void 0,
+            onFocus: handleFocus,
+            onBlur: handleBlur,
+            onChange: handleChange,
+            style: { "--label-height": `${labelHeight}px` },
+            placeholder: " ",
+            "aria-labelledby": labelId
+          }
+        )
       }
     );
   }
@@ -4918,7 +4927,7 @@ var ExternalIcon = ({
   size
 }) => /* @__PURE__ */ jsxs(Fragment, { children: [
   size === "lg" || size === "md" ? /* @__PURE__ */ jsx(LinkOutOutline24Icon, { "aria-hidden": true, display: "inline" }) : /* @__PURE__ */ jsx(LinkOutOutline18Icon, { "aria-hidden": true, display: "inline" }),
-  /* @__PURE__ */ jsx(VisuallyHidden, { children: label })
+  /* @__PURE__ */ jsx(VisuallyHidden$1, { children: label })
 ] });
 var TextLink = forwardRef(
   ({ children, external, href, ...props }, ref) => {
@@ -6252,24 +6261,121 @@ var TabsList = Tabs$1.List;
 var TabsTrigger = Tabs$1.Trigger;
 var TabsIndicator = Tabs$1.Indicator;
 var TabsContent = Tabs$1.Content;
-var Table = forwardRef((props, ref) => {
-  const { variant = "ghost", size, colorPalette = "green", children } = props;
-  const recipe = useSlotRecipe({ key: "table" });
-  const styles = recipe({ variant, size });
+var getNextSortState = (current, key, columnIndex) => ({
+  key,
+  columnIndex,
+  direction: current.key === key && current.direction === "asc" ? "desc" : "asc"
+});
+var getSortKey = (children) => typeof children === "string" ? children.trim() : null;
+var getColumnIndex = (element) => {
+  var _a5;
+  return Array.prototype.indexOf.call((_a5 = element.parentElement) == null ? void 0 : _a5.children, element);
+};
+var getCellText = (row, columnIndex) => {
+  const cell = Children.toArray(
+    row.props.children
+  )[columnIndex];
+  if (!isValidElement(cell))
+    return "";
+  const props = cell.props;
+  return typeof props["data-sort"] === "string" && props["data-sort"] || typeof props.children === "string" && props.children.trim() || "";
+};
+var sortRows = (children, columnIndex, direction) => Children.toArray(children).toSorted((a, b) => {
+  if (!isValidElement(a) || !isValidElement(b))
+    return 0;
+  const cmp = getCellText(a, columnIndex).localeCompare(
+    getCellText(b, columnIndex)
+  );
+  return direction === "asc" ? cmp : -cmp;
+});
+var SortContext = createContext({
+  enabled: false,
+  sortState: { key: null, direction: "asc", columnIndex: null },
+  onSort: () => {
+  }
+});
+var useTableSort = () => useContext(SortContext);
+var Table = forwardRef(
+  ({
+    variant = "ghost",
+    size,
+    colorPalette = "green",
+    children,
+    sortable = false,
+    ...rest
+  }, ref) => {
+    const [sortState, setSortState] = useState({
+      key: null,
+      direction: "asc",
+      columnIndex: null
+    });
+    const handleSort = (key, columnIndex) => {
+      if (!sortable)
+        return;
+      setSortState(getNextSortState(sortState, key, columnIndex));
+    };
+    const recipe = useSlotRecipe({ key: "table" });
+    const styles = recipe({ variant, size });
+    return /* @__PURE__ */ jsx(
+      Table$1.Root,
+      {
+        variant,
+        size,
+        colorPalette,
+        css: styles,
+        ref,
+        ...rest,
+        children: /* @__PURE__ */ jsx(
+          SortContext.Provider,
+          {
+            value: { enabled: sortable, sortState, onSort: handleSort },
+            children
+          }
+        )
+      }
+    );
+  }
+);
+Table.displayName = "Table";
+var TableColumnHeader = forwardRef(({ children, onClick, ...rest }, ref) => {
+  const { enabled, sortState, onSort } = useTableSort();
+  const key = getSortKey(children);
+  const isActive = enabled && key != null && key === sortState.key;
   return /* @__PURE__ */ jsx(
-    Table$1.Root,
+    Table$1.ColumnHeader,
     {
-      variant,
-      size,
-      colorPalette,
-      css: styles,
       ref,
-      ...props,
-      children
+      onClick: (event) => {
+        if (enabled && key) {
+          onSort(key, getColumnIndex(event.currentTarget));
+        }
+        onClick == null ? void 0 : onClick(event);
+      },
+      cursor: enabled && key ? "pointer" : void 0,
+      ...rest,
+      children: /* @__PURE__ */ jsxs(HStack, { children: [
+        children,
+        isActive && (sortState.direction === "asc" ? /* @__PURE__ */ jsx(DropdownUpFill18Icon, {}) : /* @__PURE__ */ jsx(DropdownDownFill18Icon, {}))
+      ] })
     }
   );
 });
-Table.displayName = "Table";
+TableColumnHeader.displayName = "ColumnHeader";
+var TableRow = forwardRef(
+  (props, ref) => /* @__PURE__ */ jsx(Table$1.Row, { ref, ...props })
+);
+TableRow.displayName = "TableRow";
+var TableBody = forwardRef(
+  ({ children, ...rest }, ref) => {
+    const { sortState } = useTableSort();
+    const sorted = useMemo(
+      () => sortState.columnIndex == null ? children : sortRows(children, sortState.columnIndex, sortState.direction),
+      [children, sortState]
+    );
+    return /* @__PURE__ */ jsx(Table$1.Body, { ref, ...rest, children: sorted });
+  }
+);
+TableBody.displayName = "TableBody";
 var attachedInputsRecipe = defineRecipe({
   base: {
     display: "flex",
@@ -6280,10 +6386,10 @@ var attachedInputsRecipe = defineRecipe({
     },
     "& > *": {
       position: "relative",
-      zIndex: 0
+      zIndex: 100
     },
     "& > *:focus-within": {
-      zIndex: 1
+      zIndex: 101
     }
   },
   variants: {
@@ -7675,8 +7781,7 @@ var comboboxSlotRecipe = defineSlotRecipe({
     },
     label: {
       fontWeight: "medium",
-      userSelect: "none",
-      textStyle: "sm"
+      userSelect: "none"
     },
     input: {
       transition: "border-radius",
@@ -11596,8 +11701,6 @@ var textStyles = defineTextStyles({
     value: {
       fontSize: [
         tokens23__default.font.style.xxl["font-size"].mobile,
-        null,
-        null,
         tokens23__default.font.style.xxl["font-size"].desktop
       ],
       fontFamily: tokens23__default.font.style.xxl["font-family"],
@@ -11608,8 +11711,6 @@ var textStyles = defineTextStyles({
     value: {
       fontSize: [
         tokens23__default.font.style["xl-display"]["font-size"].mobile,
-        null,
-        null,
         tokens23__default.font.style["xl-display"]["font-size"].desktop
       ],
       fontFamily: tokens23__default.font.style["xl-display"]["font-family"],
@@ -11620,8 +11721,6 @@ var textStyles = defineTextStyles({
     value: {
       fontSize: [
         tokens23__default.font.style["xl-sans"]["font-size"].mobile,
-        null,
-        null,
         tokens23__default.font.style["xl-sans"]["font-size"].desktop
       ],
       fontFamily: tokens23__default.font.style["xl-sans"]["font-family"],
@@ -11632,8 +11731,6 @@ var textStyles = defineTextStyles({
     value: {
       fontSize: [
         tokens23__default.font.style.lg["font-size"].mobile,
-        null,
-        null,
         tokens23__default.font.style.lg["font-size"].desktop
       ],
       fontFamily: tokens23__default.font.style.lg["font-family"],
@@ -11644,8 +11741,6 @@ var textStyles = defineTextStyles({
     value: {
       fontSize: [
         tokens23__default.font.style["md-lg"]["font-size"].mobile,
-        null,
-        null,
         tokens23__default.font.style["md-lg"]["font-size"].desktop
       ],
       fontFamily: tokens23__default.font.style["md-lg"]["font-family"],
@@ -11656,8 +11751,6 @@ var textStyles = defineTextStyles({
     value: {
       fontSize: [
         tokens23__default.font.style.md["font-size"].mobile,
-        null,
-        null,
         tokens23__default.font.style.md["font-size"].desktop
       ],
       fontFamily: tokens23__default.font.style.md["font-family"],
@@ -11668,8 +11761,6 @@ var textStyles = defineTextStyles({
     value: {
       fontSize: [
         tokens23__default.font.style.sm["font-size"].mobile,
-        null,
-        null,
         tokens23__default.font.style.sm["font-size"].desktop
       ],
       fontFamily: tokens23__default.font.style.sm["font-family"],
@@ -11680,8 +11771,6 @@ var textStyles = defineTextStyles({
     value: {
       fontSize: [
         tokens23__default.font.style.xs["font-size"].mobile,
-        null,
-        null,
         tokens23__default.font.style.xs["font-size"].desktop
       ],
       fontFamily: tokens23__default.font.style.xs["font-family"],
@@ -11692,8 +11781,6 @@ var textStyles = defineTextStyles({
     value: {
       fontSize: [
         tokens23__default.font.style["2xs"]["font-size"].mobile,
-        null,
-        null,
         tokens23__default.font.style["2xs"]["font-size"].desktop
       ],
       fontFamily: tokens23__default.font.style["2xs"]["font-family"],
@@ -11748,6 +11835,6 @@ var TooltipContent = forwardRef(
 );
 TooltipContent.displayName = "TooltipContent";
 
-export { Accordion, AccordionItem, AccordionItemContent, AccordionItemTrigger, Alert, AttachedInputs, Autocomplete, AutocompleteItem, AutocompleteItemGroup, AutocompleteItemGroupLabel, Badge, Brand, Breadcrumb, Button, ButtonGroup, Calendar, CalendarCell, CalendarGrid, CalendarHeader, CalendarProvider, CardSelect, CardSelectContent, CardSelectTrigger, CargonetLogo, Checkbox, CheckboxGroup, ChoiceChip, Clipboard, ClipboardButton, CloseButton, CloseDrawerLine, Code, ColorInlineLoader, ColorModeButton, ColorModeIcon, ColorModeProvider, ColorSpinner, Combobox2 as Combobox, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkSpinner, DatePicker, DateRangePicker, DialogActionTrigger, DialogBackdrop, DialogBody, DialogCloseTrigger, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger, Drawer, DrawerActionTrigger, DrawerBackTrigger, DrawerBackdrop, DrawerBody, DrawerCloseTrigger, DrawerContent, DrawerFooter, DrawerFullScreenHeader, DrawerHeader, DrawerTitle, DrawerTrigger, Expandable, ExpandableAlert, ExpandableItem, Field3 as Field, FieldErrorText, FieldLabel, Fieldset, FieldsetContent, FieldsetErrorText, FieldsetHelperText, FieldsetLegend, FloatingActionButton, Heading, IconButton, InfoTag, Input, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightSpinner, LineIcon, List, ListBox, ListIndicator, ListItem2 as ListItem, NativeSelect, Nudge, NudgeActions, NudgeCloseTrigger, NudgeContent, NudgeTrigger, NudgeWizardStep, NumericStepper, Pagination, PaginationEllipsis, PaginationItem, PaginationItems, PaginationNextTrigger, PaginationPrevTrigger, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover2 as Popover, PopoverContent, PopoverTrigger, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardLabel, RadioGroup, RangeCalendar, ScrollCalendar, SearchInput, Select, SelectContent, SelectItem, SelectItemGroup, SelectItemText, SelectLabel, SelectRoot, SelectTrigger, SelectValueText, Separator, ServiceAlert, Skeleton, SkeletonCircle, SkeletonText, SkipButton, SporProvider, StaticCard, Stepper, StepperStep, SvgBox, Switch, Table, Tabs, TabsContent, TabsIndicator, TabsList, TabsTrigger, Text3 as Text, TextLink, Textarea, TimePicker, Tooltip, TooltipContent, TooltipTrigger, TravelTag, VyLogo, VyLogoPride, createTexts, createToast, fontFaces, slugify, system, themes, useCalendar, useColorMode, useColorModeValue, useTranslation };
+export { Accordion, AccordionItem, AccordionItemContent, AccordionItemTrigger, Alert, AttachedInputs, Autocomplete, AutocompleteItem, AutocompleteItemGroup, AutocompleteItemGroupLabel, Badge, Brand, Breadcrumb, Button, ButtonGroup, Calendar, CalendarCell, CalendarGrid, CalendarHeader, CalendarProvider, CardSelect, CardSelectContent, CardSelectTrigger, CargonetLogo, Checkbox, CheckboxGroup, ChoiceChip, Clipboard, ClipboardButton, CloseButton, CloseDrawerLine, Code, ColorInlineLoader, ColorModeButton, ColorModeIcon, ColorModeProvider, ColorSpinner, Combobox2 as Combobox, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkSpinner, DatePicker, DateRangePicker, DialogActionTrigger, DialogBackdrop, DialogBody, DialogCloseTrigger, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger, Drawer, DrawerActionTrigger, DrawerBackTrigger, DrawerBackdrop, DrawerBody, DrawerCloseTrigger, DrawerContent, DrawerFooter, DrawerFullScreenHeader, DrawerHeader, DrawerTitle, DrawerTrigger, Expandable, ExpandableAlert, ExpandableItem, Field3 as Field, FieldErrorText, FieldLabel, Fieldset, FieldsetContent, FieldsetErrorText, FieldsetHelperText, FieldsetLegend, FloatingActionButton, Heading, IconButton, InfoTag, Input, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightSpinner, LineIcon, List, ListBox, ListIndicator, ListItem2 as ListItem, NativeSelect, Nudge, NudgeActions, NudgeCloseTrigger, NudgeContent, NudgeTrigger, NudgeWizardStep, NumericStepper, Pagination, PaginationEllipsis, PaginationItem, PaginationItems, PaginationNextTrigger, PaginationPrevTrigger, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover2 as Popover, PopoverContent, PopoverTrigger, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardLabel, RadioGroup, RangeCalendar, ScrollCalendar, SearchInput, Select, SelectContent, SelectItem, SelectItemGroup, SelectItemText, SelectLabel, SelectRoot, SelectTrigger, SelectValueText, Separator, ServiceAlert, Skeleton, SkeletonCircle, SkeletonText, SkipButton, SporProvider, StaticCard, Stepper, StepperStep, SvgBox, Switch, Table, TableBody, TableColumnHeader, TableRow, Tabs, TabsContent, TabsIndicator, TabsList, TabsTrigger, Text3 as Text, TextLink, Textarea, TimePicker, Tooltip, TooltipContent, TooltipTrigger, TravelTag, VyLogo, VyLogoPride, createTexts, createToast, fontFaces, slugify, system, themes, useCalendar, useColorMode, useColorModeValue, useTableSort, useTranslation };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.mjs.map