@vygruppen/spor-react 12.22.0 → 12.22.2

package/dist/index.mjs

@@ -1,4 +1,4 @@
-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';
+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, 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 * 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';
@@ -9,7 +9,7 @@ import { spinnerColorData, inlineLoaderColorData, contentLoaderData, fullScreenL
 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)"
         }
       }
@@ -3234,7 +3237,7 @@ var Input = forwardRef(
         errorText,
         id: props.id,
         labelAsChild,
-        label: /* @__PURE__ */ jsxs(Flex, { fontSize: fontSize ?? "mobile.md", children: [
+        label: /* @__PURE__ */ jsxs(Flex, { children: [
           /* @__PURE__ */ jsx(Box, { visibility: "hidden", children: startElement }),
           label
         ] }),
@@ -3246,6 +3249,7 @@ var Input = forwardRef(
             {
               pointerEvents: "none",
               paddingX: 2,
+              "aria-hidden": "true",
               fontSize: fontSize ?? "mobile.md",
               children: startElement
             }
@@ -3298,6 +3302,9 @@ var Autocomplete = ({
   filteredExternally,
   loading,
   disabled,
+  emptyLabel,
+  openOnClick = true,
+  openOnFocus = true,
   ...rest
 }) => {
   const { contains } = useFilter({ sensitivity: "base" });
@@ -3318,50 +3325,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 +3440,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 +4011,6 @@ var NumericStepper = React20__default.forwardRef((props, ref) => {
     {
       css: styles.root,
       width: "auto",
-      id: idProperty,
       ref,
       label,
       helperText,
@@ -4021,8 +4035,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 +4046,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 +4084,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
           }
         )
       ]
@@ -4918,7 +4930,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) => {
@@ -5135,126 +5147,129 @@ var fillRecipe = {
 };
 var Path = chakra("path", fillRecipe);
 var SVGGroup = chakra("g", fillRecipe);
-var VyLogo = forwardRef((props, ref) => {
-  const id = useId();
-  return /* @__PURE__ */ jsxs(SvgBox, { ref, viewBox: "0 0 107 54", ...props, children: [
-    /* @__PURE__ */ jsx("title", { children: "Vy logo" }),
-    /* @__PURE__ */ jsx(
-      Path,
-      {
-        fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: "M79.97 33.44a.04.04 0 0 0 0-.08 5.76 5.76 0 0 1-2.32-.85c-1.56-1-2.79-2.9-3.83-6.07L68.14 7.16c-1.18-4.04-3.42-5.85-5.48-6.6a8.36 8.36 0 0 0-2.88-.52h-1.44a.04.04 0 0 0 0 .08c.57.09 1.18.24 1.8.5 1.92.8 3.92 2.63 5.06 6.54l5.61 19.07c1.06 3.3 2.31 5.27 3.92 6.3 1.01.64 2.17.9 3.5.9h1.74Z",
-        fill: "main"
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "mask",
-      {
-        id: `${id}-a`,
-        style: { maskType: "alpha" },
-        maskUnits: "userSpaceOnUse",
-        x: "0",
-        y: "0",
-        width: "94",
-        height: "54",
-        children: /* @__PURE__ */ jsx(
-          Path,
-          {
-            fillRule: "evenodd",
-            clipRule: "evenodd",
-            d: "M0 .03h93.26v53.65H0V.03Z",
-            fill: "main"
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      SVGGroup,
-      {
-        mask: `url(#${id}-a)`,
-        fillRule: "evenodd",
-        clipRule: "evenodd",
-        fill: "main",
-        children: [
-          /* @__PURE__ */ jsx(Path, { d: "M84.57 33.44a.04.04 0 0 0 .01-.08c-2.34-.3-3.85-3.59-4.68-6.38-.88-2.93-4.04-13.63-5.92-19.82C72.08.94 66.2.05 63.54.04a.04.04 0 0 0-.01.08c2.49.34 6.02 1.85 7.55 7.04 1.34 4.55 5.6 19.03 5.76 19.51 1.02 3.03 2.22 4.85 3.73 5.83a6.3 6.3 0 0 0 3.54.94h.46ZM23.28 53.68h-.72c-2.12 0-4.68-1.08-6.09-6.04L3.8 4.37C3.04 1.77 1.93.47.03.15A.04.04 0 0 1 .04.07h1.9c2.54 0 3.92 1.27 4.8 4.3 0 0 11.72 39.78 12.79 43.54.78 2.78 1.7 4.67 3.13 5.43.23.13.42.2.62.26a.04.04 0 0 1 0 .08ZM18.99 5.99C17.77 1.79 15.87.04 12.37.04h-1.71a.04.04 0 0 0 0 .08c2.73.39 4.32 2.19 5.39 5.87 0 0 10.49 35.72 11.85 40.4l1.44-4.87L18.99 6Z" }),
-          /* @__PURE__ */ jsx(Path, { d: "M24.26 53.68h1.24c1.57 0 2.69-.41 3.52-1.1 1.37-1.1 1.99-2.93 2.56-4.86.09-.29 11.2-37.95 11.59-39.42 1.32-4.97 4.27-7.13 7.43-7.9a12.2 12.2 0 0 1 1.58-.28.04.04 0 0 0 0-.08h-1.4c-4.15 0-8.8 1.65-10.56 8.26-.63 2.38-11.5 39.13-11.58 39.42-.57 1.93-1.23 3.96-2.59 5.07-.56.45-1.06.7-1.8.81a.04.04 0 0 0 0 .08ZM81.3 27.76l6.53-21.78C88.89 2.3 90.49.5 93.23.11a.04.04 0 0 0-.01-.08H91.5c-3.5 0-5.4 1.76-6.62 5.95l-5.05 16.97s1.33 4.46 1.46 4.8Z" })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Path,
-      {
-        fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: "M98.49.07h-1.82c-2.98 0-4.6 1.49-5.63 5.06l-6.52 21.79a18.22 18.22 0 0 1-1.67 3.96c.57.78 1.17 1.26 1.76 1.38 1.13-.96 2.06-2.75 2.89-5.46l6.49-21.67c.9-3.1 2.23-4.63 4.5-4.98a.04.04 0 0 0 0-.08Z",
-        fill: "accent"
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Path,
-      {
-        fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: "M85.25 34.53h-2.93L78.58 46.9c-1.82 6.1 1.05 6.73 2.15 6.73h2.31a.04.04 0 0 0 .01-.09c-1.25-.3-2.96-1.6-1.45-6.64l3.65-12.37ZM102.35.11c.02 0 .03-.02.03-.04a.04.04 0 0 0-.04-.04h-.4c-2.54 0-3.92 1.27-4.8 4.3 0 0-5 16.82-6.57 22.03-1.57 5.2-2.65 6.6-4.78 6.97l-.11.03a.04.04 0 0 0 0 .08h1.45c3.72 0 5.1-2.48 6.41-6.84l7.5-25.07c.19-.6.7-1.23 1.31-1.42Z",
-        fill: "main"
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "mask",
-      {
-        id: `${id}-b`,
-        style: { maskType: "alpha" },
-        maskUnits: "userSpaceOnUse",
-        x: "29",
-        y: "0",
-        width: "78",
-        height: "54",
-        children: /* @__PURE__ */ jsx(
-          Path,
-          {
-            fillRule: "evenodd",
-            clipRule: "evenodd",
-            d: "M29.55.04H106v53.64H29.55V.04Z",
-            fill: "main"
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsxs(SVGGroup, { mask: `url(#${id}-b)`, fillRule: "evenodd", clipRule: "evenodd", children: [
+var VyLogo = forwardRef(
+  ({ variant = "default", ...props }, ref) => {
+    const id = useId();
+    const fillForAccent = variant === "mono" ? "main" : "accent";
+    return /* @__PURE__ */ jsxs(SvgBox, { ref, viewBox: "0 0 107 54", ...props, children: [
+      /* @__PURE__ */ jsx("title", { children: "Vy logo" }),
       /* @__PURE__ */ jsx(
         Path,
         {
-          d: "m88.2 34.45-3.96 13.46c-1.54 5.18.9 5.72 1.83 5.72h2.26a.04.04 0 0 0 0-.09c-1.05-.27-2.44-1.4-1.18-5.63l4.43-15.02c-.7.71-1.88 1.37-3.38 1.56ZM93.71 53.63c.02 0 .04-.02.04-.05a.04.04 0 0 0-.03-.04c-.9-.25-2.02-1.24-.96-4.77 0 0 12.4-42.2 13.08-44.6a3.1 3.1 0 0 0-2.47-4.1c-.02 0-.06-.02-.07.01-.01.04.03.06.04.06.3.16.63.52.45 1.14L89.84 48.77c-1.32 4.4.76 4.86 1.55 4.86h2.32ZM74.1 33.44a.04.04 0 0 0 0-.08 5.77 5.77 0 0 1-2.3-.83c-1.64-1.04-2.9-3.06-3.98-6.5-.1-.29-5.37-18.25-5.55-18.87-1.12-3.8-2.91-5.63-4.68-6.46a7.06 7.06 0 0 0-3.04-.66H53a.04.04 0 0 0-.02.08c.3.05 4.32.17 6.35 7.04 2.03 6.86 4.46 15.07 5.28 17.97 1.77 6.26 4.07 8.3 7.75 8.3h1.73Z",
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M79.97 33.44a.04.04 0 0 0 0-.08 5.76 5.76 0 0 1-2.32-.85c-1.56-1-2.79-2.9-3.83-6.07L68.14 7.16c-1.18-4.04-3.42-5.85-5.48-6.6a8.36 8.36 0 0 0-2.88-.52h-1.44a.04.04 0 0 0 0 .08c.57.09 1.18.24 1.8.5 1.92.8 3.92 2.63 5.06 6.54l5.61 19.07c1.06 3.3 2.31 5.27 3.92 6.3 1.01.64 2.17.9 3.5.9h1.74Z",
           fill: "main"
         }
       ),
+      /* @__PURE__ */ jsx(
+        "mask",
+        {
+          id: `${id}-a`,
+          style: { maskType: "alpha" },
+          maskUnits: "userSpaceOnUse",
+          x: "0",
+          y: "0",
+          width: "94",
+          height: "54",
+          children: /* @__PURE__ */ jsx(
+            Path,
+            {
+              fillRule: "evenodd",
+              clipRule: "evenodd",
+              d: "M0 .03h93.26v53.65H0V.03Z",
+              fill: "main"
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        SVGGroup,
+        {
+          mask: `url(#${id}-a)`,
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          fill: "main",
+          children: [
+            /* @__PURE__ */ jsx(Path, { d: "M84.57 33.44a.04.04 0 0 0 .01-.08c-2.34-.3-3.85-3.59-4.68-6.38-.88-2.93-4.04-13.63-5.92-19.82C72.08.94 66.2.05 63.54.04a.04.04 0 0 0-.01.08c2.49.34 6.02 1.85 7.55 7.04 1.34 4.55 5.6 19.03 5.76 19.51 1.02 3.03 2.22 4.85 3.73 5.83a6.3 6.3 0 0 0 3.54.94h.46ZM23.28 53.68h-.72c-2.12 0-4.68-1.08-6.09-6.04L3.8 4.37C3.04 1.77 1.93.47.03.15A.04.04 0 0 1 .04.07h1.9c2.54 0 3.92 1.27 4.8 4.3 0 0 11.72 39.78 12.79 43.54.78 2.78 1.7 4.67 3.13 5.43.23.13.42.2.62.26a.04.04 0 0 1 0 .08ZM18.99 5.99C17.77 1.79 15.87.04 12.37.04h-1.71a.04.04 0 0 0 0 .08c2.73.39 4.32 2.19 5.39 5.87 0 0 10.49 35.72 11.85 40.4l1.44-4.87L18.99 6Z" }),
+            /* @__PURE__ */ jsx(Path, { d: "M24.26 53.68h1.24c1.57 0 2.69-.41 3.52-1.1 1.37-1.1 1.99-2.93 2.56-4.86.09-.29 11.2-37.95 11.59-39.42 1.32-4.97 4.27-7.13 7.43-7.9a12.2 12.2 0 0 1 1.58-.28.04.04 0 0 0 0-.08h-1.4c-4.15 0-8.8 1.65-10.56 8.26-.63 2.38-11.5 39.13-11.58 39.42-.57 1.93-1.23 3.96-2.59 5.07-.56.45-1.06.7-1.8.81a.04.04 0 0 0 0 .08ZM81.3 27.76l6.53-21.78C88.89 2.3 90.49.5 93.23.11a.04.04 0 0 0-.01-.08H91.5c-3.5 0-5.4 1.76-6.62 5.95l-5.05 16.97s1.33 4.46 1.46 4.8Z" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Path,
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M98.49.07h-1.82c-2.98 0-4.6 1.49-5.63 5.06l-6.52 21.79a18.22 18.22 0 0 1-1.67 3.96c.57.78 1.17 1.26 1.76 1.38 1.13-.96 2.06-2.75 2.89-5.46l6.49-21.67c.9-3.1 2.23-4.63 4.5-4.98a.04.04 0 0 0 0-.08Z",
+          fill: fillForAccent
+        }
+      ),
       /* @__PURE__ */ jsx(
         Path,
         {
-          d: "M55.43 2.4c-1.48 1.27-2.7 3.16-3.44 5.9-.07.29-11.08 37.74-11.32 38.55-.93 3.12-1.7 6.21-5.2 6.75a.04.04 0 0 0 0 .08h.7l.6-.01c3.56-.14 5.33-1.66 6.85-6.82L54.94 8.3c.44-1.44.96-3.08 1.7-4.52-.15-.25-.7-.96-1.2-1.38Z",
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M85.25 34.53h-2.93L78.58 46.9c-1.82 6.1 1.05 6.73 2.15 6.73h2.31a.04.04 0 0 0 .01-.09c-1.25-.3-2.96-1.6-1.45-6.64l3.65-12.37ZM102.35.11c.02 0 .03-.02.03-.04a.04.04 0 0 0-.04-.04h-.4c-2.54 0-3.92 1.27-4.8 4.3 0 0-5 16.82-6.57 22.03-1.57 5.2-2.65 6.6-4.78 6.97l-.11.03a.04.04 0 0 0 0 .08h1.45c3.72 0 5.1-2.48 6.41-6.84l7.5-25.07c.19-.6.7-1.23 1.31-1.42Z",
           fill: "main"
         }
       ),
+      /* @__PURE__ */ jsx(
+        "mask",
+        {
+          id: `${id}-b`,
+          style: { maskType: "alpha" },
+          maskUnits: "userSpaceOnUse",
+          x: "29",
+          y: "0",
+          width: "78",
+          height: "54",
+          children: /* @__PURE__ */ jsx(
+            Path,
+            {
+              fillRule: "evenodd",
+              clipRule: "evenodd",
+              d: "M29.55.04H106v53.64H29.55V.04Z",
+              fill: "main"
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxs(SVGGroup, { mask: `url(#${id}-b)`, fillRule: "evenodd", clipRule: "evenodd", children: [
+        /* @__PURE__ */ jsx(
+          Path,
+          {
+            d: "m88.2 34.45-3.96 13.46c-1.54 5.18.9 5.72 1.83 5.72h2.26a.04.04 0 0 0 0-.09c-1.05-.27-2.44-1.4-1.18-5.63l4.43-15.02c-.7.71-1.88 1.37-3.38 1.56ZM93.71 53.63c.02 0 .04-.02.04-.05a.04.04 0 0 0-.03-.04c-.9-.25-2.02-1.24-.96-4.77 0 0 12.4-42.2 13.08-44.6a3.1 3.1 0 0 0-2.47-4.1c-.02 0-.06-.02-.07.01-.01.04.03.06.04.06.3.16.63.52.45 1.14L89.84 48.77c-1.32 4.4.76 4.86 1.55 4.86h2.32ZM74.1 33.44a.04.04 0 0 0 0-.08 5.77 5.77 0 0 1-2.3-.83c-1.64-1.04-2.9-3.06-3.98-6.5-.1-.29-5.37-18.25-5.55-18.87-1.12-3.8-2.91-5.63-4.68-6.46a7.06 7.06 0 0 0-3.04-.66H53a.04.04 0 0 0-.02.08c.3.05 4.32.17 6.35 7.04 2.03 6.86 4.46 15.07 5.28 17.97 1.77 6.26 4.07 8.3 7.75 8.3h1.73Z",
+            fill: "main"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Path,
+          {
+            d: "M55.43 2.4c-1.48 1.27-2.7 3.16-3.44 5.9-.07.29-11.08 37.74-11.32 38.55-.93 3.12-1.7 6.21-5.2 6.75a.04.04 0 0 0 0 .08h.7l.6-.01c3.56-.14 5.33-1.66 6.85-6.82L54.94 8.3c.44-1.44.96-3.08 1.7-4.52-.15-.25-.7-.96-1.2-1.38Z",
+            fill: "main"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Path,
+          {
+            d: "M53.78 1.44a4.64 4.64 0 0 0-4.17.93A10.79 10.79 0 0 0 46.19 8L34.53 47.72c-.58 1.93-1.2 3.75-2.56 4.87-.62.5-1.4.86-2.39 1.01a.04.04 0 0 0 0 .08h1.8c1.57 0 2.69-.41 3.53-1.1 1.36-1.1 1.98-2.93 2.56-4.86L49.05 8.3c.73-2.74 1.95-4.63 3.43-5.9.43-.36.88-.68 1.35-.95l-.05-.01Z",
+            fill: fillForAccent
+          }
+        )
+      ] }),
       /* @__PURE__ */ jsx(
         Path,
         {
-          d: "M53.78 1.44a4.64 4.64 0 0 0-4.17.93A10.79 10.79 0 0 0 46.19 8L34.53 47.72c-.58 1.93-1.2 3.75-2.56 4.87-.62.5-1.4.86-2.39 1.01a.04.04 0 0 0 0 .08h1.8c1.57 0 2.69-.41 3.53-1.1 1.36-1.1 1.98-2.93 2.56-4.86L49.05 8.3c.73-2.74 1.95-4.63 3.43-5.9.43-.36.88-.68 1.35-.95l-.05-.01Z",
-          fill: "accent"
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M26.55 50.33a9.09 9.09 0 0 1-1.24-2.7c-.44-1.54-12.46-42.5-12.46-42.5C11.82 1.56 10.2.07 7.22.07H5.4a.04.04 0 0 0 0 .08C7.67.5 9 2.04 9.9 5.13l12.46 42.5c.65 2.28 1.53 3.74 2.5 4.65.7-.4 1.29-1.05 1.69-1.95Z",
+          fill: "main"
         }
       )
-    ] }),
-    /* @__PURE__ */ jsx(
-      Path,
-      {
-        fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: "M26.55 50.33a9.09 9.09 0 0 1-1.24-2.7c-.44-1.54-12.46-42.5-12.46-42.5C11.82 1.56 10.2.07 7.22.07H5.4a.04.04 0 0 0 0 .08C7.67.5 9 2.04 9.9 5.13l12.46 42.5c.65 2.28 1.53 3.74 2.5 4.65.7-.4 1.29-1.05 1.69-1.95Z",
-        fill: "main"
-      }
-    )
-  ] });
-});
+    ] });
+  }
+);
 VyLogo.displayName = "VyLogo";
 var VyLogoPride = forwardRef(
   (props, ref) => {
@@ -6277,10 +6292,10 @@ var attachedInputsRecipe = defineRecipe({
     },
     "& > *": {
       position: "relative",
-      zIndex: 0
+      zIndex: 100
     },
     "& > *:focus-within": {
-      zIndex: 1
+      zIndex: 101
     }
   },
   variants: {
@@ -7672,8 +7687,7 @@ var comboboxSlotRecipe = defineSlotRecipe({
     },
     label: {
       fontWeight: "medium",
-      userSelect: "none",
-      textStyle: "sm"
+      userSelect: "none"
     },
     input: {
       transition: "border-radius",
@@ -11593,8 +11607,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"],
@@ -11605,8 +11617,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"],
@@ -11617,8 +11627,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"],
@@ -11629,8 +11637,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"],
@@ -11641,8 +11647,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"],
@@ -11653,8 +11657,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"],
@@ -11665,8 +11667,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"],
@@ -11677,8 +11677,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"],
@@ -11689,8 +11687,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"],