@vygruppen/spor-react 12.3.1 → 12.3.2

package/dist/index.mjs

@@ -1,17 +1,17 @@
-import { useSlotRecipe, Accordion as Accordion$1, Stack, Box, HStack, Progress, defineRecipe, chakra, Text, useRecipe, Circle, Skeleton as Skeleton$1, Button as Button$1, Group as Group$1, 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, ClientOnly as ClientOnly$1, Field, defineStyle, defineSlotRecipe, PopoverAnchor, useFieldContext, Popover as Popover$1, Portal, Dialog, createContext as createContext$1, Drawer as Drawer$1, Grid, GridItem, usePopoverContext, Checkbox as Checkbox$1, CheckboxGroup as CheckboxGroup$1, CheckboxCard, Fieldset as Fieldset$1, Input as Input$1, InputElement, List as List$1, ListItem, NativeSelect as NativeSelect$1, useControllableState, createListCollection, RadioGroup as RadioGroup$1, Select as Select$1, Switch as Switch$1, Textarea as Textarea$1, RadioCard as RadioCard$1, Separator as Separator$1, Link, Center, Pagination as Pagination$1, usePaginationContext, createToaster, Tabs as Tabs$1, Table as Table$1, defineSemanticTokens, defineTokens, defineAnimationStyles, defineGlobalStyles, defineTextStyles, createSystem, defaultBaseConfig, VisuallyHidden, defineConfig, ChakraProvider, Toaster as Toaster$1, Toast, Icon } 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 as Group$1, 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, ClientOnly as ClientOnly$1, Field, defineStyle, defineSlotRecipe, PopoverAnchor, useFieldContext, Popover as Popover$1, Portal, Dialog, createContext as createContext$1, Drawer as Drawer$1, Grid, GridItem, usePopoverContext, Checkbox as Checkbox$1, CheckboxGroup as CheckboxGroup$1, CheckboxCard, Fieldset as Fieldset$1, Input as Input$1, InputElement, NativeSelect as NativeSelect$1, useControllableState, createListCollection, RadioGroup as RadioGroup$1, Select as Select$1, Switch as Switch$1, Textarea as Textarea$1, RadioCard as RadioCard$1, Separator as Separator$1, Link, List as List$1, Center, Pagination as Pagination$1, usePaginationContext, createToaster, Tabs as Tabs$1, Table as Table$1, defineSemanticTokens, defineTokens, defineAnimationStyles, defineGlobalStyles, defineTextStyles, createSystem, defaultBaseConfig, VisuallyHidden, defineConfig, ListItem, ChakraProvider, Toaster as Toaster$1, Toast, Icon } from '@chakra-ui/react';
 export { Box, BreadcrumbCurrentLink, BreadcrumbEllipsis, BreadcrumbLink, Center, Collapsible, Container, Em, Flex, For, FormatByte, FormatNumber, Grid, GridItem, HStack, Image, Kbd, LocaleProvider, Portal, Show, SimpleGrid, Spacer, Span, Stack, TableBody, TableCaption, TableCell, TableColumn, TableColumnHeader, TableFooter, TableHeader, TableRoot, TableRow, VStack, VisuallyHidden, createListCollection, createSystem, defineConfig, defineRecipe, defineStyle, useBreakpointValue, useCheckbox, useClipboard, useControllableProp, useDisclosure, useMediaQuery, useToken } from '@chakra-ui/react';
-import { DropdownDownFill24Icon, CopyOutline18Icon, CheckmarkFill18Icon, CloseFill30Icon, CloseFill24Icon, CloseFill18Icon, DropdownDownFill18Icon, ServiceFill24Icon, WarningFill24Icon, DropdownRightFill18Icon, CalendarOutline24Icon, ArrowLeftFill24Icon, CloseOutline24Icon, SearchOutline24Icon, InformationFill24Icon, InformationFill18Icon, WarningFill18Icon, ErrorFill24Icon, ErrorFill18Icon, Forward15MediaControllerFill30Icon, Backward15MediaControllerFill30Icon, PauseMediaControllerFill24Icon, PlayMediaControllerFill24Icon, NextMediaControllerFill30Icon, PreviousMediaControllerFill30Icon, ArrowRightFill18Icon, DropdownLeftOutline18Icon, DropdownRightOutline18Icon, WalkFill30Icon, WalkFill24Icon, WalkFill18Icon, AltTransportFill30Icon, AltTransportFill24Icon, AltTransportFill18Icon, TramFill30Icon, TramFill24Icon, TramFill18Icon, SubwayFill30Icon, SubwayFill24Icon, SubwayFill18Icon, FerryFill30Icon, FerryFill24Icon, FerryFill18Icon, BusFill30Icon, BusFill24Icon, BusFill18Icon, ExpressBusFill30Icon, ExpressBusFill24Icon, ExpressBusFill18Icon, TrainFill30Icon, TrainFill24Icon, TrainFill18Icon, LinkOutOutline24Icon, QuestionFill24Icon, ErrorOutline24Icon, SuccessFill24Icon, ArrowLeftOutline24Icon, ArrowRightOutline24Icon, DropdownLeftFill18Icon, SuccessFill18Icon } from '@vygruppen/spor-icon-react';
+import { DropdownDownFill24Icon, CopyOutline18Icon, CheckmarkFill18Icon, CloseFill18Icon, CloseFill30Icon, CloseFill24Icon, ServiceFill24Icon, QuestionFill24Icon, ErrorOutline24Icon, ErrorFill24Icon, AltTransportFill24Icon, WarningFill24Icon, SuccessFill24Icon, InformationFill24Icon, DropdownDownFill18Icon, DropdownRightFill18Icon, CalendarOutline24Icon, ArrowLeftFill24Icon, CloseOutline24Icon, SearchOutline24Icon, InformationFill18Icon, WarningFill18Icon, ErrorFill18Icon, 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, LinkOutOutline24Icon, ArrowLeftOutline24Icon, ArrowRightOutline24Icon, DropdownLeftFill18Icon, SuccessFill18Icon } from '@vygruppen/spor-icon-react';
 import * as React28 from 'react';
-import React28__default, { forwardRef, createContext, useId, cloneElement, useEffect, useRef, useState, isValidElement, useMemo, useLayoutEffect, useContext } from 'react';
+import React28__default, { forwardRef, createContext, useId, cloneElement, useEffect, useRef, isValidElement, useState, useMemo, useLayoutEffect, useContext } 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, useFilter, useComboBox, useListBox, useOption, useListBoxSection, useCalendar, useCalendarGrid, useCalendarCell, useButton, useId as useId$1, useDateRangePicker, useRangeCalendar, useTimeField } from 'react-aria';
+import { useProgressBar, useDateSegment, useDateField, useDatePicker, I18nProvider, usePopover, DismissButton, Overlay, useCalendar, useCalendarGrid, useCalendarCell, useButton, useId as useId$1, useDateRangePicker, useFilter, useComboBox, useListBox, useOption, useListBoxSection, useRangeCalendar, useTimeField } from 'react-aria';
 import { useTheme, ThemeProvider } from 'next-themes';
 import { LuMoon, LuSun } from 'react-icons/lu';
-import { useDateFieldState, useDatePickerState, useComboBoxState, useCalendarState, useDateRangePickerState, useTimeFieldState, useRangeCalendarState } from 'react-stately';
+import { useDateFieldState, useDatePickerState, useCalendarState, useDateRangePickerState, useTimeFieldState, useComboBoxState, useRangeCalendarState } from 'react-stately';
 export { Item, Section } from 'react-stately';
 import { createAnatomy } from '@ark-ui/react/anatomy';
 import { popoverAnatomy as popoverAnatomy$1 } from '@ark-ui/react/popover';
@@ -392,7 +392,7 @@ var ProgressLoader = forwardRef(
     "aria-label": ariaLabel,
     width,
     ...rest
-  }) => {
+  }, ref) => {
     const { t } = useTranslation();
     const currentLoadingText = useRotatingLabel({
       label,
@@ -420,6 +420,7 @@ var ProgressLoader = forwardRef(
         "aria-valuemax": 100,
         "aria-label": ariaLabel ?? t(texts.fallbackLabel(value ?? "?")),
         ...rest,
+        ref,
         children: [
           /* @__PURE__ */ jsxs(chakra.svg, { as: "svg", viewBox: "0 0 246 78", fill: "none", children: [
             /* @__PURE__ */ jsx(
@@ -605,7 +606,7 @@ var LoadingContent = ({
 }) => /* @__PURE__ */ jsxs(Fragment, { children: [
   /* @__PURE__ */ jsx(Flex, { gap: "1", visibility: "hidden", children }),
   /* @__PURE__ */ jsxs(Center, { position: "absolute", inset: "1px 0", children: [
-    /* @__PURE__ */ jsx(ColorInlineLoader, { width: "80%", marginX: 2, marginY: 2 }),
+    /* @__PURE__ */ jsx(ColorInlineLoader, { maxWidth: "8", marginX: 2, marginY: 2 }),
     loadingText && /* @__PURE__ */ jsx(Box, { children: loadingText })
   ] })
 ] });
@@ -902,9 +903,9 @@ var IconButton = forwardRef(
       {
         "aria-label": props["aria-label"],
         size,
-        ref,
         position: "relative",
         ...rest,
+        ref,
         children: loading ? /* @__PURE__ */ jsx(ColorSpinner, { width: "2em", height: "2em", margin: 1 }) : icon
       }
     );
@@ -917,18 +918,18 @@ var CloseButton = forwardRef(
     return /* @__PURE__ */ jsx(
       IconButton,
       {
-        ref,
         variant: "ghost",
-        icon: getIcon(size),
+        icon: /* @__PURE__ */ jsx(CloseIcon, { size }),
         size,
         "aria-label": props["aria-label"] || t(texts4.close),
-        ...props
+        ...props,
+        ref
       }
     );
   }
 );
 CloseButton.displayName = "CloseButton";
-var getIcon = (size) => {
+var CloseIcon = ({ size }) => {
   switch (size) {
     case "xs":
     case "sm": {
@@ -940,6 +941,9 @@ var getIcon = (size) => {
     case "lg": {
       return /* @__PURE__ */ jsx(CloseFill30Icon, {});
     }
+    default: {
+      return /* @__PURE__ */ jsx(CloseFill18Icon, {});
+    }
   }
 };
 var texts4 = createTexts({
@@ -1020,19 +1024,23 @@ var useScrollDirection = () => {
   }, [scrollDirection]);
   return scrollDirection;
 };
-var AlertIcon = ({ variant, customIcon }) => {
-  const { t } = useTranslation();
-  const icon = customIcon ?? getIcon2(variant);
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      as: icon,
-      "aria-label": t(texts5[variant]),
-      color: customIcon ? `alert.${variant}.icon` : void 0
-    }
-  );
-};
-var getIcon2 = (variant) => {
+var AlertIcon = forwardRef(
+  ({ variant, customIcon }, ref) => {
+    const { t } = useTranslation();
+    const Icon2 = customIcon ?? getIcon(variant);
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        as: Icon2,
+        ref,
+        "aria-label": t(texts5[variant]),
+        color: customIcon ? `alert.${variant}.icon` : void 0
+      }
+    );
+  }
+);
+AlertIcon.displayName = "AlertIcon";
+var getIcon = (variant) => {
   switch (variant) {
     case "info": {
       return InformationFill24Icon;
@@ -2229,14 +2237,14 @@ var texts8 = createTexts({
     en: "Calendar"
   }
 });
-var CalendarTriggerButton = forwardRef(({ variant, disabled, ariaLabelledby, ...buttonProps }) => {
+var CalendarTriggerButton = forwardRef(({ variant, disabled, ariaLabelledby, ...buttonProps }, ref) => {
   const { t } = useTranslation();
   const recipe = useSlotRecipe({
     key: "datePicker",
     recipe: datePickerSlotRecipe
   });
   const styles = recipe({ variant });
-  return /* @__PURE__ */ jsx(PopoverAnchor, { ...buttonProps, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(PopoverAnchor, { ...buttonProps, ref, children: /* @__PURE__ */ jsx(
     IconButton,
     {
       icon: /* @__PURE__ */ jsx(CalendarOutline24Icon, {}),
@@ -2433,6 +2441,7 @@ var DatePicker = forwardRef(
     width = "auto",
     invalid = false,
     helperText,
+    positioning,
     ...props
   }, externalRef) => {
     const chakraFieldProps = useFieldContext();
@@ -2476,7 +2485,7 @@ var DatePicker = forwardRef(
         display: "inline-flex",
         flexDirection: "column",
         width,
-        children: /* @__PURE__ */ jsxs(Popover$1.Root, { ...dialogProps, children: [
+        children: /* @__PURE__ */ jsxs(Popover$1.Root, { ...dialogProps, positioning, children: [
           /* @__PURE__ */ jsx(
             Field3,
             {
@@ -2568,6 +2577,7 @@ function DateRangePicker({
   errorText,
   helperText,
   invalid,
+  positioning,
   ...props
 }) {
   const fieldContextPRops = useFieldContext();
@@ -2602,7 +2612,7 @@ function DateRangePicker({
   const popoverContent = /* @__PURE__ */ jsx(Popover$1.Positioner, { children: /* @__PURE__ */ jsx(Popover$1.Content, { css: styles.calendarPopover, children: /* @__PURE__ */ jsx(Popover$1.Body, { maxWidth: "60rem", children: /* @__PURE__ */ jsx(RangeCalendar, { variant: "core", ...calendarProps }) }) }) });
   return /* @__PURE__ */ jsx(I18nProvider, { locale, children: /* @__PURE__ */ jsxs(Box, { position: "relative", display: "inline-flex", flexDirection: "column", children: [
     props.label && /* @__PURE__ */ jsx("label", { ...labelProps, htmlFor: datePickerId, children: props.label }),
-    /* @__PURE__ */ jsxs(Popover$1.Root, { ...dialogProps, children: [
+    /* @__PURE__ */ jsxs(Popover$1.Root, { ...dialogProps, positioning, children: [
       /* @__PURE__ */ jsx(
         Field3,
         {
@@ -3140,147 +3150,145 @@ var Popover = forwardRef(
   }
 );
 Popover.displayName = "Popover";
-var Combobox = forwardRef(
-  (props) => {
-    const {
-      label,
-      loading,
-      lefticon,
-      righticon,
-      borderBottomLeftRadius = "sm",
-      borderBottomRightRadius = "sm",
-      borderTopLeftRadius = "sm",
-      borderTopRightRadius = "sm",
-      marginBottom,
-      marginTop,
-      marginX,
-      marginY,
-      marginRight,
-      marginLeft,
-      paddingBottom,
-      paddingRight,
-      paddingTop,
-      paddingLeft,
-      paddingX,
-      paddingY,
-      emptyContent,
-      inputRef: externalInputRef,
-      children,
-      variant
-    } = props;
-    const { contains } = useFilter({ sensitivity: "base" });
-    const fallbackInputRef = useRef(null);
-    const inputRef = externalInputRef ?? fallbackInputRef;
-    const listBoxRef = useRef(null);
-    const popoverRef = useRef(null);
-    const listboxId = `${useId()}-listbox`;
-    const inputWidth = useInputWidth(inputRef);
-    const state = useComboBoxState({
-      defaultFilter: contains,
-      shouldCloseOnBlur: true,
-      ...props
-    });
-    const comboBoxProps = {
-      borderTopLeftRadius,
-      borderTopRightRadius,
-      marginBottom,
-      marginTop,
-      marginRight,
-      marginLeft,
-      marginX,
-      marginY,
-      paddingBottom,
-      paddingRight,
-      paddingTop,
-      paddingLeft,
-      paddingX,
-      paddingY,
-      lefticon
-    };
-    const {
-      inputProps: { ...inputProps },
-      listBoxProps
-    } = useComboBox(
+var Combobox = (props) => {
+  const {
+    label,
+    loading,
+    lefticon,
+    righticon,
+    borderBottomLeftRadius = "sm",
+    borderBottomRightRadius = "sm",
+    borderTopLeftRadius = "sm",
+    borderTopRightRadius = "sm",
+    marginBottom,
+    marginTop,
+    marginX,
+    marginY,
+    marginRight,
+    marginLeft,
+    paddingBottom,
+    paddingRight,
+    paddingTop,
+    paddingLeft,
+    paddingX,
+    paddingY,
+    emptyContent,
+    inputRef: externalInputRef,
+    children,
+    variant
+  } = props;
+  const { contains } = useFilter({ sensitivity: "base" });
+  const fallbackInputRef = useRef(null);
+  const inputRef = externalInputRef ?? fallbackInputRef;
+  const listBoxRef = useRef(null);
+  const popoverRef = useRef(null);
+  const listboxId = `${useId()}-listbox`;
+  const inputWidth = useInputWidth(inputRef);
+  const state = useComboBoxState({
+    defaultFilter: contains,
+    shouldCloseOnBlur: true,
+    ...props
+  });
+  const comboBoxProps = {
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    marginBottom,
+    marginTop,
+    marginRight,
+    marginLeft,
+    marginX,
+    marginY,
+    paddingBottom,
+    paddingRight,
+    paddingTop,
+    paddingLeft,
+    paddingX,
+    paddingY,
+    lefticon
+  };
+  const {
+    inputProps: { ...inputProps },
+    listBoxProps
+  } = useComboBox(
+    {
+      ...props,
+      inputRef,
+      listBoxRef,
+      popoverRef,
+      label
+    },
+    state
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Input,
       {
-        ...props,
-        inputRef,
-        listBoxRef,
-        popoverRef,
-        label
-      },
-      state
-    );
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(
-        Input,
-        {
-          ...styleProps(comboBoxProps),
-          "aria-haspopup": "listbox",
-          ref: inputRef,
-          role: "combobox",
-          errorText: props.errorText,
-          helperText: props.helperText,
-          required: props.required,
-          disabled: props.disabled,
-          invalid: props.invalid,
-          label,
-          variant,
-          "aria-expanded": state.isOpen,
-          "aria-autocomplete": "list",
-          "aria-controls": listboxId,
-          borderBottomLeftRadius: state.isOpen && !loading ? 0 : borderBottomLeftRadius,
-          borderBottomRightRadius: state.isOpen && !loading ? 0 : borderBottomRightRadius,
-          _active: { backgroundColor: "core.surface.active" },
-          ...inputProps,
-          endElement: loading ? /* @__PURE__ */ jsx(
-            ColorSpinner,
-            {
-              width: "1.5rem",
-              alignSelf: "center",
-              paddingRight,
-              css: {
-                div: {
-                  display: "flex",
-                  alignItems: "center"
-                }
+        ...styleProps(comboBoxProps),
+        "aria-haspopup": "listbox",
+        ref: inputRef,
+        role: "combobox",
+        errorText: props.errorText,
+        helperText: props.helperText,
+        required: props.required,
+        disabled: props.disabled,
+        invalid: props.invalid,
+        label,
+        variant,
+        "aria-expanded": state.isOpen,
+        "aria-autocomplete": "list",
+        "aria-controls": listboxId,
+        borderBottomLeftRadius: state.isOpen && !loading ? 0 : borderBottomLeftRadius,
+        borderBottomRightRadius: state.isOpen && !loading ? 0 : borderBottomRightRadius,
+        _active: { backgroundColor: "core.surface.active" },
+        ...inputProps,
+        endElement: loading ? /* @__PURE__ */ jsx(
+          ColorSpinner,
+          {
+            width: "1.5rem",
+            alignSelf: "center",
+            paddingRight,
+            css: {
+              div: {
+                display: "flex",
+                alignItems: "center"
               }
             }
-          ) : righticon,
-          placeholder: ""
-        }
-      ),
-      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", "data-trigger": "multiselect" }),
-      state.isOpen && !loading && /* @__PURE__ */ jsx(
-        Popover,
-        {
-          state,
-          triggerRef: inputRef,
-          ref: popoverRef,
-          isNonModal: true,
-          placement: "bottom start",
-          shouldFlip: false,
-          hasBackdrop: false,
-          containerPadding: 0,
-          children: /* @__PURE__ */ jsx(
-            ListBox,
-            {
-              ...{
-                autoFocus: typeof listBoxProps.autoFocus === "boolean" ? listBoxProps.autoFocus : void 0
-              },
-              state,
-              id: listboxId,
-              listBoxRef,
-              emptyContent,
-              maxWidth: inputWidth,
-              variant,
-              children
-            }
-          )
-        }
-      )
-    ] });
-  }
-);
+          }
+        ) : righticon,
+        placeholder: ""
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { "aria-hidden": "true", "data-trigger": "multiselect" }),
+    state.isOpen && !loading && /* @__PURE__ */ jsx(
+      Popover,
+      {
+        state,
+        triggerRef: inputRef,
+        ref: popoverRef,
+        isNonModal: true,
+        placement: "bottom start",
+        shouldFlip: false,
+        hasBackdrop: false,
+        containerPadding: 0,
+        children: /* @__PURE__ */ jsx(
+          ListBox,
+          {
+            ...{
+              autoFocus: typeof listBoxProps.autoFocus === "boolean" ? listBoxProps.autoFocus : void 0
+            },
+            state,
+            id: listboxId,
+            listBoxRef,
+            emptyContent,
+            maxWidth: inputWidth,
+            variant,
+            children
+          }
+        )
+      }
+    )
+  ] });
+};
 Combobox.displayName = "Combobox";
 var useInputWidth = (inputRef) => {
   const [inputWidth, setInputWidth] = useState("auto");
@@ -3445,31 +3453,29 @@ var Input = forwardRef(
   }
 );
 Input.displayName = "Input";
-var ListBox = forwardRef(
-  (props) => {
-    const { loading, listBoxRef, state, maxWidth, variant, children } = props;
-    const { listBoxProps } = useListBox(props, state, listBoxRef);
-    const recipe = useSlotRecipe({ key: "listBox" });
-    const styles = recipe({ variant });
-    return /* @__PURE__ */ jsxs(
-      List,
-      {
-        ...listBoxProps,
-        ref: listBoxRef,
-        css: styles.root,
-        "aria-busy": loading,
-        maxWidth,
-        children: [
-          state.collection.size === 0 && props.emptyContent,
-          [...state.collection].map(
-            (item) => item.type === "section" ? /* @__PURE__ */ jsx(ListBoxSection, { section: item, state }, item.key) : /* @__PURE__ */ jsx(Option, { item, state }, item.key)
-          ),
-          children
-        ]
-      }
-    );
-  }
-);
+var ListBox = (props) => {
+  const { loading, listBoxRef, state, maxWidth, variant, children } = props;
+  const { listBoxProps } = useListBox(props, state, listBoxRef);
+  const recipe = useSlotRecipe({ key: "listBox" });
+  const styles = recipe({ variant });
+  return /* @__PURE__ */ jsxs(
+    List,
+    {
+      ...listBoxProps,
+      ref: listBoxRef,
+      css: styles.root,
+      "aria-busy": loading,
+      maxWidth,
+      children: [
+        state.collection.size === 0 && props.emptyContent,
+        [...state.collection].map(
+          (item) => item.type === "section" ? /* @__PURE__ */ jsx(ListBoxSection, { section: item, state }, item.key) : /* @__PURE__ */ jsx(Option, { item, state }, item.key)
+        ),
+        children
+      ]
+    }
+  );
+};
 ListBox.displayName = "ListBox";
 function ItemLabel({ children }) {
   const { labelProps } = useOptionContext();
@@ -3849,7 +3855,7 @@ var numericStepperRecipe = defineSlotRecipe({
     }
   }
 });
-var NumericStepper = React28__default.forwardRef((props) => {
+var NumericStepper = React28__default.forwardRef((props, ref) => {
   const {
     name: nameProp,
     id: idProp,
@@ -3879,7 +3885,7 @@ var NumericStepper = React28__default.forwardRef((props) => {
     var _a5;
     (_a5 = addButtonRef.current) == null ? void 0 : _a5.focus();
   };
-  return /* @__PURE__ */ jsxs(Field3, { css: styles.root, width: "auto", ...rest, children: [
+  return /* @__PURE__ */ jsxs(Field3, { css: styles.root, width: "auto", ...rest, ref, children: [
     /* @__PURE__ */ jsx(
       VerySmallButton,
       {
@@ -4425,42 +4431,44 @@ var SelectValueText = React28.forwardRef(function SelectValueText2(props, ref) {
 var SelectLabel = Select$1.Label;
 var SelectItemText = Select$1.ItemText;
 var SelectRoot = Select$1.Root;
-var Switch = forwardRef((props) => {
-  const {
-    rootRef,
-    size = "md",
-    label,
-    invalid,
-    errorText,
-    helperText,
-    ...rest
-  } = props;
-  const recipe = useSlotRecipe({ key: "switch" });
-  const styles = recipe({ size });
-  return /* @__PURE__ */ jsx(
-    Field3,
-    {
-      style: { width: "auto" },
+var Switch = forwardRef(
+  (props, ref) => {
+    const {
+      rootRef,
+      size = "md",
+      label,
       invalid,
       errorText,
       helperText,
-      children: /* @__PURE__ */ jsxs(
-        Switch$1.Root,
-        {
-          ref: rootRef,
-          ...rest,
-          checked: props.checked,
-          css: styles.root,
-          children: [
-            /* @__PURE__ */ jsx(Switch$1.Label, { children: label }),
-            /* @__PURE__ */ jsx(Switch$1.HiddenInput, {}),
-            /* @__PURE__ */ jsx(Switch$1.Control, { css: styles.control, children: /* @__PURE__ */ jsx(Switch$1.Thumb, {}) })
-          ]
-        }
-      )
-    }
-  );
-});
+      ...rest
+    } = props;
+    const recipe = useSlotRecipe({ key: "switch" });
+    const styles = recipe({ size });
+    return /* @__PURE__ */ jsx(
+      Field3,
+      {
+        style: { width: "auto" },
+        invalid,
+        errorText,
+        helperText,
+        children: /* @__PURE__ */ jsxs(
+          Switch$1.Root,
+          {
+            ref: rootRef,
+            ...rest,
+            checked: props.checked,
+            css: styles.root,
+            children: [
+              /* @__PURE__ */ jsx(Switch$1.Label, { children: label }),
+              /* @__PURE__ */ jsx(Switch$1.HiddenInput, { ref }),
+              /* @__PURE__ */ jsx(Switch$1.Control, { css: styles.control, children: /* @__PURE__ */ jsx(Switch$1.Thumb, {}) })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
 Switch.displayName = "Switch";
 var useLabelHeight = (label) => {
   const labelRef = useRef(null);
@@ -4841,7 +4849,7 @@ var LineIcon = forwardRef(
     target = "lineIcon",
     label,
     ...rest
-  }) {
+  }, ref) {
     const recipe = useSlotRecipe({ key: "lineIcon" });
     const styles = recipe({ variant, size, ...rest });
     const targetPadding = () => {
@@ -4871,6 +4879,7 @@ var LineIcon = forwardRef(
         borderWidth: borderContainer(),
         borderColor: variant === "walk" ? "core.outline" : "transparent",
         "aria-label": label,
+        ref,
         children: /* @__PURE__ */ jsx(Icon2, { css: styles.icon })
       }
     );
@@ -5964,7 +5973,7 @@ var ProgressDot = ({ isActive }) => {
     }
   );
 };
-var ProgressIndicator = forwardRef(({ numberOfSteps, activeStep }) => {
+var ProgressIndicator = forwardRef(({ numberOfSteps, activeStep }, ref) => {
   const { t } = useTranslation();
   const recipe = useSlotRecipe({
     key: "progressIndicator"
@@ -5979,6 +5988,7 @@ var ProgressIndicator = forwardRef(({ numberOfSteps, activeStep }) => {
       "aria-valuemax": numberOfSteps,
       "aria-valuenow": activeStep,
       "aria-valuetext": t(texts24.stepsOf(activeStep, numberOfSteps)),
+      ref,
       children: /* @__PURE__ */ jsx(Box, { css: styles.container, children: Array.from({ length: numberOfSteps }, (_, i) => /* @__PURE__ */ jsx(
         ProgressDot,
         {