@vygruppen/spor-react 12.22.0 → 12.22.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vygruppen/spor-react",
   "type": "module",
-  "version": "12.22.0",
+  "version": "12.22.2",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -68,8 +68,8 @@
     "vitest": "^0.26.3",
     "vitest-axe": "^0.1.0",
     "vitest-canvas-mock": "^0.2.2",
-    "@vygruppen/eslint-config": "2.1.0",
-    "@vygruppen/tsconfig": "0.1.1"
+    "@vygruppen/tsconfig": "0.1.1",
+    "@vygruppen/eslint-config": "2.1.0"
   },
   "peerDependencies": {
     "react": ">=18.0.0 <19.0.0",

package/src/alert/AlertIcon.tsx

@@ -13,6 +13,7 @@ import {
   WarningFill24Icon,
 } from "@vygruppen/spor-icon-react";
 import { forwardRef } from "react";
+import { VisuallyHidden } from "react-aria";
 
 import { createTexts, useTranslation } from "../i18n";
 import { AlertProps } from "./Alert";
@@ -30,7 +31,10 @@ export const AlertIcon = forwardRef<SVGSVGElement, AlertIconProps>(
     const { t } = useTranslation();
 
     return (
-      <Box ref={ref} aria-label={t(texts[variant as keyof typeof texts])}>
+      <Box ref={ref}>
+        <VisuallyHidden>
+          {t(texts[variant as keyof typeof texts])}
+        </VisuallyHidden>
         {CustomAlertIcon ? (
           <CustomAlertIcon color={`alert.${variant}.icon`} />
         ) : (

package/src/input/AttachedInputs.tsx

@@ -90,7 +90,7 @@ const 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",
@@ -107,7 +107,7 @@ const SwitchButton = chakra(
         },
         vertical: {
           top: "calc(50% - 15px)",
-          right: "12px",
+          right: "3rem",
           transform: "rotate(90deg)",
         },
       },

package/src/input/Autocomplete.tsx

@@ -2,6 +2,7 @@ import {
   Combobox,
   ComboboxItemProps,
   ComboboxRootProps,
+  useCombobox,
   useComboboxContext,
   useFilter,
   useListCollection,
@@ -24,6 +25,8 @@ type Props = {
   leftIcon?: React.ReactNode;
   filteredExternally?: boolean;
   loading?: boolean;
+  emptyLabel?: React.ReactNode;
+  openOnFocus?: boolean;
 } & Omit<ComboboxRootProps, "collection"> &
   FieldProps;
 
@@ -40,6 +43,9 @@ export const Autocomplete = ({
   filteredExternally,
   loading,
   disabled,
+  emptyLabel,
+  openOnClick = true,
+  openOnFocus = true,
   ...rest
 }: Props) => {
   const { contains } = useFilter({ sensitivity: "base" });
@@ -64,26 +70,29 @@ export const Autocomplete = ({
     [children, collection.items],
   );
 
+  const combobox = useCombobox({
+    collection,
+    openOnClick,
+    onInputValueChange: (event) => {
+      if (!filteredExternally) {
+        filter(event.inputValue);
+      }
+      onInputValueChange?.(event);
+    },
+    positioning: {
+      placement: "bottom",
+      offset: {
+        mainAxis: 3,
+        crossAxis: -1,
+      },
+      flip: false,
+    },
+    disabled,
+    ...rest,
+  });
+
   return (
-    <Combobox.Root
-      {...rest}
-      collection={collection}
-      onInputValueChange={(event) => {
-        if (!filteredExternally) {
-          filter(event.inputValue);
-        }
-        onInputValueChange?.(event);
-      }}
-      positioning={{
-        placement: "bottom",
-        offset: {
-          mainAxis: 3,
-          crossAxis: -1,
-        },
-        flip: false,
-      }}
-      disabled={disabled}
-    >
+    <Combobox.RootProvider value={combobox}>
       <Combobox.Control>
         <Combobox.Input asChild>
           <Input
@@ -95,17 +104,22 @@ export const Autocomplete = ({
             helperText={helperText}
             errorText={errorText}
             required={required}
+            onFocus={() => {
+              if (openOnFocus) combobox.setOpen(true);
+            }}
           />
         </Combobox.Input>
         <Combobox.IndicatorGroup>
-          <Combobox.ClearTrigger asChild>
+          <Combobox.ClearTrigger asChild aria-label={t(texts.clearValue)}>
             <CloseButton size="xs" />
           </Combobox.ClearTrigger>
         </Combobox.IndicatorGroup>
       </Combobox.Control>
       <Combobox.Positioner>
         <Combobox.Content>
-          <Combobox.Empty>{!loading && t(texts.noItemsFound)}</Combobox.Empty>
+          <Combobox.Empty>
+            {!loading && (emptyLabel ?? t(texts.noItemsFound))}
+          </Combobox.Empty>
           {loading ? (
             <ColorSpinner width="1.5rem" p="2" />
           ) : (
@@ -113,7 +127,7 @@ export const Autocomplete = ({
           )}
         </Combobox.Content>
       </Combobox.Positioner>
-    </Combobox.Root>
+    </Combobox.RootProvider>
   );
 };
 
@@ -206,4 +220,10 @@ const texts = createTexts({
     sv: "Inga resultat",
     en: "No results found",
   },
+  clearValue: {
+    nb: "Tøm verdi",
+    nn: "Tøm verdi",
+    sv: "Rensa värde",
+    en: "Clear value",
+  },
 });

package/src/input/Field.tsx

@@ -129,7 +129,9 @@ export const Field = React.forwardRef<HTMLDivElement, FieldProps>(
             </FloatingLabel>
           )}
           {errorText && (
-            <ChakraField.ErrorText>{errorText}</ChakraField.ErrorText>
+            <ChakraField.ErrorText aria-live="polite">
+              {errorText}
+            </ChakraField.ErrorText>
           )}
         </ChakraField.Root>
         {helperText && (

package/src/input/FloatingLabel.tsx

@@ -19,14 +19,14 @@ const floatingLabelStyles = defineStyle({
   },
 
   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",
   },

package/src/input/Input.tsx

@@ -107,7 +107,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
         id={props.id}
         labelAsChild={labelAsChild}
         label={
-          <Flex fontSize={fontSize ?? "mobile.md"}>
+          <Flex>
             <Box visibility="hidden">{startElement}</Box>
             {label}
           </Flex>
@@ -119,6 +119,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
           <InputElement
             pointerEvents="none"
             paddingX={2}
+            aria-hidden="true"
             fontSize={fontSize ?? "mobile.md"}
           >
             {startElement}

package/src/input/NumericStepper.tsx

@@ -107,7 +107,6 @@ export const NumericStepper = React.forwardRef<
     <Field
       css={styles.root}
       width="auto"
-      id={idProperty}
       ref={ref}
       label={label}
       helperText={helperText}
@@ -133,7 +132,6 @@ export const NumericStepper = React.forwardRef<
           }
         }}
         disabled={disabled || value <= minValue}
-        id={value <= minValue ? undefined : idProperty}
       />
       {withInput ? (
         <Input
@@ -142,7 +140,7 @@ export const NumericStepper = React.forwardRef<
           name={nameProperty}
           value={value}
           disabled={disabled}
-          id={value === 0 ? undefined : idProperty}
+          id={idProperty}
           css={styles.input}
           width={`${Math.max(value.toString().length + 1, 3)}ch`}
           aria-live="assertive"
@@ -189,7 +187,6 @@ export const NumericStepper = React.forwardRef<
         )}
         onClick={() => onChange(Math.min(value + clampedStepSize, maxValue))}
         disabled={disabled || value >= maxValue}
-        id={value >= maxValue ? undefined : idProperty}
       />
     </Field>
   );

package/src/logo/VyLogo.tsx

@@ -27,94 +27,102 @@ const Path = chakra("path", fillRecipe);
 
 const SVGGroup = chakra("g", fillRecipe);
 
-type VyLogoProps = ComponentProps<typeof SvgBox>;
+type VyLogoBaseProps = ComponentProps<typeof SvgBox>;
+type VyLogoProps = VyLogoBaseProps & {
+  /** mono = black in light mode, white in dark mode */
+  variant?: "default" | "mono";
+};
+
+export const VyLogo = forwardRef<SVGSVGElement, VyLogoProps>(
+  ({ variant = "default", ...props }, ref) => {
+    const id = useId();
 
-export const VyLogo = forwardRef<SVGSVGElement, VyLogoProps>((props, ref) => {
-  const id = useId();
+    const fillForAccent = variant === "mono" ? "main" : "accent";
 
-  return (
-    <SvgBox ref={ref} viewBox="0 0 107 54" {...props}>
-      <title>Vy logo</title>
-      <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"
-      />
-      <mask
-        id={`${id}-a`}
-        style={{ maskType: "alpha" }}
-        maskUnits="userSpaceOnUse"
-        x="0"
-        y="0"
-        width="94"
-        height="54"
-      >
+    return (
+      <SvgBox ref={ref} viewBox="0 0 107 54" {...props}>
+        <title>Vy logo</title>
         <Path
           fillRule="evenodd"
           clipRule="evenodd"
-          d="M0 .03h93.26v53.65H0V.03Z"
+          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"
         />
-      </mask>
-      <SVGGroup
-        mask={`url(#${id}-a)`}
-        fillRule="evenodd"
-        clipRule="evenodd"
-        fill="main"
-      >
-        <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" />
-        <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" />
-      </SVGGroup>
-      <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"
-      />
-      <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"
-      />
-      <mask
-        id={`${id}-b`}
-        style={{ maskType: "alpha" }}
-        maskUnits="userSpaceOnUse"
-        x="29"
-        y="0"
-        width="78"
-        height="54"
-      >
-        <Path
+        <mask
+          id={`${id}-a`}
+          style={{ maskType: "alpha" }}
+          maskUnits="userSpaceOnUse"
+          x="0"
+          y="0"
+          width="94"
+          height="54"
+        >
+          <Path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M0 .03h93.26v53.65H0V.03Z"
+            fill="main"
+          />
+        </mask>
+        <SVGGroup
+          mask={`url(#${id}-a)`}
           fillRule="evenodd"
           clipRule="evenodd"
-          d="M29.55.04H106v53.64H29.55V.04Z"
           fill="main"
-        />
-      </mask>
-      <SVGGroup mask={`url(#${id}-b)`} fillRule="evenodd" clipRule="evenodd">
+        >
+          <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" />
+          <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" />
+        </SVGGroup>
         <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"
+          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}
         />
         <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"
         />
+        <mask
+          id={`${id}-b`}
+          style={{ maskType: "alpha" }}
+          maskUnits="userSpaceOnUse"
+          x="29"
+          y="0"
+          width="78"
+          height="54"
+        >
+          <Path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M29.55.04H106v53.64H29.55V.04Z"
+            fill="main"
+          />
+        </mask>
+        <SVGGroup mask={`url(#${id}-b)`} fillRule="evenodd" clipRule="evenodd">
+          <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"
+          />
+          <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"
+          />
+          <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}
+          />
+        </SVGGroup>
         <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"
         />
-      </SVGGroup>
-      <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"
-      />
-    </SvgBox>
-  );
-});
+      </SvgBox>
+    );
+  },
+);
 VyLogo.displayName = "VyLogo";

package/src/theme/recipes/attached-inputs.ts

@@ -8,12 +8,13 @@ export const attachedInputsRecipe = defineRecipe({
     "& select": {
       borderEndRadius: 0,
     },
+
     "& > *": {
       position: "relative",
-      zIndex: 0,
+      zIndex: 100,
     },
     "& > *:focus-within": {
-      zIndex: 1,
+      zIndex: 101,
     },
   },
   variants: {

package/src/theme/slot-recipes/autocomplete.ts

@@ -16,7 +16,6 @@ export const comboboxSlotRecipe = defineSlotRecipe({
     label: {
       fontWeight: "medium",
       userSelect: "none",
-      textStyle: "sm",
     },
 
     input: {

package/src/theme/tokens/text-styles.ts

@@ -6,8 +6,6 @@ export const textStyles = defineTextStyles({
     value: {
       fontSize: [
         tokens.font.style.xxl["font-size"].mobile,
-        null,
-        null,
         tokens.font.style.xxl["font-size"].desktop,
       ],
       fontFamily: tokens.font.style.xxl["font-family"],
@@ -18,8 +16,6 @@ export const textStyles = defineTextStyles({
     value: {
       fontSize: [
         tokens.font.style["xl-display"]["font-size"].mobile,
-        null,
-        null,
         tokens.font.style["xl-display"]["font-size"].desktop,
       ],
       fontFamily: tokens.font.style["xl-display"]["font-family"],
@@ -30,8 +26,6 @@ export const textStyles = defineTextStyles({
     value: {
       fontSize: [
         tokens.font.style["xl-sans"]["font-size"].mobile,
-        null,
-        null,
         tokens.font.style["xl-sans"]["font-size"].desktop,
       ],
       fontFamily: tokens.font.style["xl-sans"]["font-family"],
@@ -42,8 +36,6 @@ export const textStyles = defineTextStyles({
     value: {
       fontSize: [
         tokens.font.style.lg["font-size"].mobile,
-        null,
-        null,
         tokens.font.style.lg["font-size"].desktop,
       ],
       fontFamily: tokens.font.style.lg["font-family"],
@@ -54,8 +46,6 @@ export const textStyles = defineTextStyles({
     value: {
       fontSize: [
         tokens.font.style["md-lg"]["font-size"].mobile,
-        null,
-        null,
         tokens.font.style["md-lg"]["font-size"].desktop,
       ],
       fontFamily: tokens.font.style["md-lg"]["font-family"],
@@ -66,8 +56,6 @@ export const textStyles = defineTextStyles({
     value: {
       fontSize: [
         tokens.font.style.md["font-size"].mobile,
-        null,
-        null,
         tokens.font.style.md["font-size"].desktop,
       ],
       fontFamily: tokens.font.style.md["font-family"],
@@ -78,8 +66,6 @@ export const textStyles = defineTextStyles({
     value: {
       fontSize: [
         tokens.font.style.sm["font-size"].mobile,
-        null,
-        null,
         tokens.font.style.sm["font-size"].desktop,
       ],
       fontFamily: tokens.font.style.sm["font-family"],
@@ -90,8 +76,6 @@ export const textStyles = defineTextStyles({
     value: {
       fontSize: [
         tokens.font.style.xs["font-size"].mobile,
-        null,
-        null,
         tokens.font.style.xs["font-size"].desktop,
       ],
       fontFamily: tokens.font.style.xs["font-family"],
@@ -102,8 +86,6 @@ export const textStyles = defineTextStyles({
     value: {
       fontSize: [
         tokens.font.style["2xs"]["font-size"].mobile,
-        null,
-        null,
         tokens.font.style["2xs"]["font-size"].desktop,
       ],
       fontFamily: tokens.font.style["2xs"]["font-family"],