@medway-ui/native 1.9.1 → 1.10.0

package/src/components/CardNews.tsx

@@ -54,6 +54,11 @@ interface CardNewsAuthorProps extends Omit<ViewProps, "role"> {
   src?: string;
   alt?: string;
   name?: string;
+  jobTitle?: string;
+  /**
+   * @deprecated Use `jobTitle` para o cargo. Sem `jobTitle`, `role` ainda é
+   * exibido como cargo; com `jobTitle`, vira o papel de acessibilidade da View.
+   */
   role?: string;
   children?: ReactNode;
 }
@@ -177,8 +182,8 @@ function CardNewsImage({
 }: CardNewsImageProps) {
   const { orientation } = useContext(CardNewsContext);
   const { width } = useWindowDimensions();
-  const [hasError, setHasError] = useState(false);
-  const showImage = !!src && !hasError;
+  const [failedSrc, setFailedSrc] = useState<string>();
+  const showImage = !!src && failedSrc !== src;
   const showHorizontalImage =
     orientation !== "horizontal" || width >= HORIZONTAL_IMAGE_MIN_WIDTH;
 
@@ -206,11 +211,11 @@ function CardNewsImage({
           {...imageProps}
           onError={(event) => {
             imageProps?.onError?.(event);
-            setHasError(true);
+            setFailedSrc(src);
           }}
         />
       ) : (
-        children ?? <FallbackImage className="absolute inset-0" />
+        children ?? <FallbackImage className="absolute inset-0" label={alt} />
       )}
     </View>
   );
@@ -310,12 +315,18 @@ function CardNewsAuthor({
   src,
   alt,
   name,
+  jobTitle,
   role,
   children,
   ...props
 }: CardNewsAuthorProps) {
+  const title = jobTitle ?? role;
+  const accessibilityRole =
+    jobTitle === undefined ? undefined : (role as ViewProps["role"]);
+
   return (
     <View
+      role={accessibilityRole}
       className={cn("flex-row items-center gap-2", className)}
       {...props}
     >
@@ -328,9 +339,9 @@ function CardNewsAuthor({
             </AvatarFallback>
           </Avatar>
           <View className="flex flex-col gap-0.5">
-            {role ? (
+            {title ? (
               <Text className="text-xs font-medium leading-xs text-secondary-foreground">
-                {role}
+                {title}
               </Text>
             ) : null}
             {name ? (

package/src/components/Carousel.tsx

@@ -48,6 +48,7 @@ function Carousel({
 }: CarouselProps) {
   const chevronColor = useThemeColor("primary-foreground");
   const slidePositionLabel = getSlidePositionLabel(slideIndex, slideCount);
+  const slideValue = slidePositionLabel ? { text: slidePositionLabel } : undefined;
 
   return (
     <View
@@ -64,11 +65,9 @@ function Carousel({
         iconLeft={<ChevronLeftMd width={20} height={20} color={chevronColor} />}
         onPress={onPrevious}
         accessibilityLabel="Slide anterior"
+        accessibilityValue={slideValue}
       />
-      <View
-        className="h-full min-w-0 flex-1 items-center justify-center px-4"
-        accessibilityLabel={slidePositionLabel}
-      >
+      <View className="h-full min-w-0 flex-1 items-center justify-center px-4">
         {children}
       </View>
       <Button
@@ -78,6 +77,7 @@ function Carousel({
         iconLeft={<ChevronRightMd width={20} height={20} color={chevronColor} />}
         onPress={onNext}
         accessibilityLabel="Próximo slide"
+        accessibilityValue={slideValue}
       />
     </View>
   );
@@ -147,7 +147,7 @@ function CarouselMetricSlide({
         <View className="items-center justify-center">{icon}</View>
       ) : null}
       <View className="w-full items-center gap-3">
-        <Text className="text-center text-[32px] font-bold leading-10 text-primary-foreground">
+        <Text className="text-center text-title-lg font-bold leading-title-lg text-primary-foreground">
           {value}
         </Text>
         <Text className="text-center text-sm font-semibold leading-sm text-primary-foreground">

package/src/components/Checkbox.tsx

@@ -1,5 +1,9 @@
 import { useState, type ReactNode } from "react";
-import { type ViewStyle } from "react-native";
+import {
+  type PressableStateCallbackType,
+  type StyleProp,
+  type ViewStyle,
+} from "react-native";
 import { cssInterop } from "nativewind";
 import * as CheckboxPrimitive from "@rn-primitives/checkbox";
 import { cva, type VariantProps } from "class-variance-authority";
@@ -20,10 +24,13 @@ const StyledCheckboxIndicator = cssInterop(CheckboxPrimitive.Indicator, {
 interface CheckboxProps
   extends Omit<
       CheckboxPrimitive.RootProps,
-      "checked" | "onCheckedChange" | "children"
+      "checked" | "onCheckedChange" | "children" | "style"
     >,
     Omit<VariantProps<typeof checkboxVariants>, "checked" | "disabled"> {
   children?: ReactNode;
+  style?:
+    | StyleProp<ViewStyle>
+    | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>);
   checked?: boolean;
   defaultChecked?: boolean;
   onCheckedChange?: (checked: boolean) => void;
@@ -91,7 +98,9 @@ function Checkbox({
   const [internalChecked, setInternalChecked] = useState(defaultChecked);
   const isControlled = checked !== undefined;
   const isChecked = isControlled ? checked : internalChecked;
-  const iconColor = useThemeColor("primary-foreground-onfill");
+  const iconColor = useThemeColor(
+    disabled ? "gray-background-fill-muted" : "primary-foreground-onfill"
+  );
 
   const handleCheckedChange = (nextChecked: boolean) => {
     if (!isControlled) setInternalChecked(nextChecked);
@@ -115,10 +124,11 @@ function Checkbox({
       onCheckedChange={handleCheckedChange}
       disabled={disabled}
       hitSlop={getMinTouchHitSlop(dimension)}
-      style={(state) => [
-        rootStyle,
-        typeof style === "function" ? style(state) : style,
-      ]}
+      style={
+        typeof style === "function"
+          ? (state: PressableStateCallbackType) => [rootStyle, style(state)]
+          : [rootStyle, style]
+      }
       className={cn(
         checkboxVariants({
           size,

package/src/components/Chip.tsx

@@ -1,10 +1,11 @@
 import { type ReactNode } from "react";
-import { Pressable, View } from "react-native";
+import { Pressable, View, type AccessibilityActionEvent } from "react-native";
 import { cva, type VariantProps } from "class-variance-authority";
 import { CloseSm } from "@medway-ui/icons/native";
 
 import { Text } from "@/components/Text";
 import { ThemedIcon } from "@/components/ThemedIcon";
+import { getMinTouchHitSlop } from "@/lib/touch-target";
 import { cn } from "@/lib/utils";
 
 const chipVariants = cva(
@@ -31,12 +32,12 @@ const chipBackgroundVariants = cva("", {
       "emphasis-soft": "bg-secondary-background-soft",
       gray: "bg-gray-background-fill",
       "gray-soft": "bg-gray-background-soft",
-      success: "bg-green-background-fill",
-      "success-soft": "bg-green-background-soft",
-      error: "bg-red-background-fill",
-      "error-soft": "bg-red-background-soft",
-      warning: "bg-yellow-background-fill",
-      "warning-soft": "bg-yellow-background-soft",
+      success: "bg-feedback-success-background-fill",
+      "success-soft": "bg-feedback-success-background-soft",
+      error: "bg-feedback-error-background-fill",
+      "error-soft": "bg-feedback-error-background-soft",
+      warning: "bg-feedback-warning-background-fill",
+      "warning-soft": "bg-feedback-warning-background-soft",
       go: "bg-go-background-fill",
       "go-soft": "bg-go-background-soft",
       cm: "bg-cm-background-fill",
@@ -79,12 +80,12 @@ const chipTextVariants = cva("text-center font-semibold", {
       "emphasis-soft": "text-secondary-foreground",
       gray: "text-gray-foreground-onfill",
       "gray-soft": "text-gray-foreground",
-      success: "text-green-foreground-onfill",
-      "success-soft": "text-green-foreground",
-      error: "text-red-foreground-onfill",
-      "error-soft": "text-red-foreground",
-      warning: "text-yellow-foreground-onfill",
-      "warning-soft": "text-yellow-foreground",
+      success: "text-feedback-success-foreground-onfill",
+      "success-soft": "text-feedback-success-foreground",
+      error: "text-feedback-error-foreground-onfill",
+      "error-soft": "text-feedback-error-foreground",
+      warning: "text-feedback-warning-foreground-onfill",
+      "warning-soft": "text-feedback-warning-foreground",
       go: "text-go-foreground-onfill",
       "go-soft": "text-go-foreground",
       cm: "text-cm-foreground-onfill",
@@ -131,12 +132,12 @@ const CHIP_ICON_COLOR_TOKEN: Record<ChipVariant, string> = {
   "emphasis-soft": "secondary-foreground",
   gray: "gray-foreground-onfill",
   "gray-soft": "gray-foreground",
-  success: "green-foreground-onfill",
-  "success-soft": "green-foreground",
-  error: "red-foreground-onfill",
-  "error-soft": "red-foreground",
-  warning: "yellow-foreground-onfill",
-  "warning-soft": "yellow-foreground",
+  success: "feedback-success-foreground-onfill",
+  "success-soft": "feedback-success-foreground",
+  error: "feedback-error-foreground-onfill",
+  "error-soft": "feedback-error-foreground",
+  warning: "feedback-warning-foreground-onfill",
+  "warning-soft": "feedback-warning-foreground",
   go: "go-foreground-onfill",
   "go-soft": "go-foreground",
   cm: "cm-foreground-onfill",
@@ -151,6 +152,15 @@ const CHIP_ICON_COLOR_TOKEN: Record<ChipVariant, string> = {
   "ia-soft": "secondary-foreground",
 };
 
+// gap-2/2.5/3 rounded down to px at NativeWind's default 14px rem, so the dismiss slop stops before the label.
+const CHIP_LABEL_GAP: Record<ChipSize, number> = {
+  sm: 7,
+  md: 8,
+  lg: 10,
+};
+
+const DEFAULT_DISMISS_LABEL = "Remover";
+
 interface ChipProps
   extends Omit<VariantProps<typeof chipVariants>, "disabled"> {
   children: ReactNode;
@@ -177,6 +187,11 @@ function Chip({
     ? CHIP_ICON_COLOR_TOKEN[variant]
     : "primary-foreground";
   const iconColor = disabled ? "gray-foreground-muted" : variantIconColor;
+  const dismissLabel = dismissAccessibilityLabel ?? DEFAULT_DISMISS_LABEL;
+  const dismissHitSlop = {
+    ...getMinTouchHitSlop(iconSize),
+    left: CHIP_LABEL_GAP[size ?? "lg"],
+  };
 
   const containerClass = cn(
     chipVariants({ size, disabled }),
@@ -184,6 +199,12 @@ function Chip({
     className
   );
 
+  const handleAccessibilityAction = (event: AccessibilityActionEvent) => {
+    if (disabled) return;
+    if (event.nativeEvent.actionName === "activate") onPress?.();
+    if (event.nativeEvent.actionName === "dismiss") onDismiss?.();
+  };
+
   const content = (
     <>
       <Text className={cn(chipTextVariants({ size, variant, disabled }))}>
@@ -194,8 +215,8 @@ function Chip({
           onPress={onDismiss}
           disabled={disabled}
           accessibilityRole="button"
-          accessibilityLabel={dismissAccessibilityLabel ?? "Remover"}
-          hitSlop={6}
+          accessibilityLabel={dismissLabel}
+          hitSlop={dismissHitSlop}
         >
           <ThemedIcon
             icon={CloseSm as never}
@@ -213,6 +234,13 @@ function Chip({
         onPress={onPress}
         disabled={disabled}
         accessibilityRole="button"
+        accessibilityState={{ disabled }}
+        accessibilityActions={
+          onDismiss
+            ? [{ name: "activate" }, { name: "dismiss", label: dismissLabel }]
+            : undefined
+        }
+        onAccessibilityAction={onDismiss ? handleAccessibilityAction : undefined}
         className={containerClass}
       >
         {content}

package/src/components/Choice.tsx

@@ -9,19 +9,24 @@ import { cn } from "@/lib/utils";
 
 type ChoiceSize = "sm" | "md" | "lg";
 
-type ChoiceTheme =
+type ChoiceResolvedTheme =
   | "gray"
   | "primary"
   | "secondary"
-  | "green"
-  | "red"
-  | "yellow"
+  | "success"
+  | "error"
+  | "warning"
   | "cm"
   | "go"
   | "cir"
   | "ped"
   | "prev";
 
+/** @deprecated Use `success`, `error` and `warning`, the names used across the package. Removed in the next major. */
+type ChoiceLegacyTheme = "green" | "red" | "yellow";
+
+type ChoiceTheme = ChoiceResolvedTheme | ChoiceLegacyTheme;
+
 interface ChoiceProps {
   label: string;
   selected?: boolean;
@@ -58,13 +63,19 @@ const SIZE_MAP: Record<
   },
 };
 
-const THEME_SELECTED_OUTER_BG: Record<ChoiceTheme, string> = {
+const LEGACY_THEME: Record<ChoiceLegacyTheme, ChoiceResolvedTheme> = {
+  green: "success",
+  red: "error",
+  yellow: "warning",
+};
+
+const THEME_SELECTED_OUTER_BG: Record<ChoiceResolvedTheme, string> = {
   gray: "bg-gray-background-soft",
   primary: "bg-primary-background-fill",
   secondary: "bg-secondary-background-fill",
-  green: "bg-green-background-fill",
-  red: "bg-red-background-fill",
-  yellow: "bg-yellow-background-fill",
+  success: "bg-feedback-success-background-fill",
+  error: "bg-feedback-error-background-fill",
+  warning: "bg-feedback-warning-background-fill",
   cm: "bg-cm-background-fill",
   go: "bg-go-background-fill",
   cir: "bg-cir-background-fill-emphasis",
@@ -72,13 +83,13 @@ const THEME_SELECTED_OUTER_BG: Record<ChoiceTheme, string> = {
   prev: "bg-prev-background-fill",
 };
 
-const THEME_CHECK_COLOR_TOKEN: Record<ChoiceTheme, string> = {
+const THEME_CHECK_COLOR_TOKEN: Record<ChoiceResolvedTheme, string> = {
   gray: "secondary-foreground",
   primary: "primary-foreground",
   secondary: "secondary-foreground",
-  green: "green-foreground",
-  red: "red-foreground",
-  yellow: "yellow-foreground",
+  success: "feedback-success-foreground",
+  error: "feedback-error-foreground",
+  warning: "feedback-warning-foreground",
   cm: "cm-foreground",
   go: "go-foreground",
   cir: "cir-foreground",
@@ -86,6 +97,14 @@ const THEME_CHECK_COLOR_TOKEN: Record<ChoiceTheme, string> = {
   prev: "prev-foreground",
 };
 
+function isLegacyTheme(theme: ChoiceTheme): theme is ChoiceLegacyTheme {
+  return theme in LEGACY_THEME;
+}
+
+function resolveTheme(theme: ChoiceTheme): ChoiceResolvedTheme {
+  return isLegacyTheme(theme) ? LEGACY_THEME[theme] : theme;
+}
+
 function Choice({
   label,
   selected = false,
@@ -97,12 +116,13 @@ function Choice({
   className,
 }: ChoiceProps) {
   const sz = SIZE_MAP[size] ?? SIZE_MAP.md;
+  const resolvedTheme = resolveTheme(theme);
   const isRaised = selected && !disabled;
 
   const outerBg = disabled
     ? "bg-gray-background-soft-muted"
     : selected
-      ? THEME_SELECTED_OUTER_BG[theme]
+      ? THEME_SELECTED_OUTER_BG[resolvedTheme]
       : "bg-gray-background-soft active:bg-gray-background-soft-emphasis";
 
   return (
@@ -145,7 +165,7 @@ function Choice({
                 colorToken={
                   disabled
                     ? "gray-foreground-muted"
-                    : THEME_CHECK_COLOR_TOKEN[theme]
+                    : THEME_CHECK_COLOR_TOKEN[resolvedTheme]
                 }
               />
             </View>

package/src/components/Dialog.tsx

@@ -3,12 +3,14 @@ import { View, ScrollView, type ViewProps } from "react-native";
 import * as DialogPrimitive from "@rn-primitives/dialog";
 import { CloseMd } from "@medway-ui/icons/native";
 import { useThemeColor } from "@/hooks/useThemeColor";
+import { useBackdropStyle } from "@/lib/backdrop";
 import { cn } from "@/lib/utils";
 import { Separator } from "@/components/Separator";
 
 interface DialogContainerProps extends DialogPrimitive.ContentProps {
   showCloseButton?: boolean;
   overlayClassName?: string;
+  closeOnOverlayPress?: boolean;
 }
 
 interface DialogHeaderProps extends ViewProps {
@@ -41,9 +43,12 @@ function DialogClose({ ...props }: DialogPrimitive.CloseProps) {
 }
 
 function DialogOverlay({ className, ...props }: DialogPrimitive.OverlayProps) {
+  const backdropStyle = useBackdropStyle(className);
+
   return (
     <DialogPrimitive.Overlay
-      className={cn("absolute inset-0 bg-black-48", className)}
+      className={cn("absolute inset-0", className)}
+      style={backdropStyle}
       {...props}
     />
   );
@@ -54,22 +59,27 @@ function DialogContainer({
   overlayClassName,
   children,
   showCloseButton = true,
+  closeOnOverlayPress = true,
   ...props
 }: DialogContainerProps) {
   const closeIconColor = useThemeColor("gray-foreground");
+  const backdropStyle = useBackdropStyle(overlayClassName);
 
   return (
     <DialogPrimitive.Portal>
       <DialogPrimitive.Overlay
-        className={cn("absolute inset-0 bg-black-48", overlayClassName)}
+        className={cn("absolute inset-0", overlayClassName)}
+        style={backdropStyle}
+        closeOnPress={closeOnOverlayPress}
       />
       <DialogPrimitive.Content
         className="absolute inset-0 items-center justify-center px-4"
+        pointerEvents="box-none"
         {...props}
       >
         <View
           className={cn(
-            "relative flex-col max-h-[90%] w-full rounded-xl bg-background shadow-lg overflow-hidden",
+            "relative flex-col max-h-[90%] w-full rounded-lg bg-surface-elevated shadow-lg overflow-hidden",
             className
           )}
         >
@@ -101,7 +111,7 @@ function DialogContent({
 }) {
   return (
     <ScrollView
-      className={cn("flex-1", containerClassName)}
+      className={cn(containerClassName)}
       contentContainerStyle={{ flexGrow: 1 }}
     >
       <View className={cn("px-8 py-6", className)}>
@@ -175,7 +185,7 @@ function DialogTitle({ className, iconLeft, iconRight, children, ...props }: Dia
 function DialogDescription({ className, ...props }: DialogPrimitive.DescriptionProps) {
   return (
     <DialogPrimitive.Description
-      className={cn("text-md leading-md text-content-paragraph", className)}
+      className={cn("text-md font-regular leading-md text-content-paragraph", className)}
       {...props}
     />
   );

package/src/components/DropdownMenu.tsx

@@ -8,7 +8,18 @@ import {
   useState,
   type ReactNode,
 } from "react";
-import { Dimensions, Pressable, StyleSheet, View, type PressableProps, type ViewProps } from "react-native";
+import {
+  BackHandler,
+  Dimensions,
+  Pressable,
+  StyleSheet,
+  View,
+  type PressableProps,
+  type PressableStateCallbackType,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle,
+} from "react-native";
 
 import { Text } from "@/components/Text";
 import * as DropdownMenuPrimitive from "@rn-primitives/dropdown-menu";
@@ -21,8 +32,11 @@ interface DropdownMenuProps extends DropdownMenuPrimitive.RootProps {
   children?: ReactNode;
 }
 
-interface DropdownMenuTriggerProps extends DropdownMenuPrimitive.TriggerProps {
+interface DropdownMenuTriggerProps extends Omit<DropdownMenuPrimitive.TriggerProps, "style"> {
   children?: ReactNode;
+  style?:
+    | StyleProp<ViewStyle>
+    | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>);
   className?: string;
 }
 
@@ -47,7 +61,7 @@ type MenuActionsContextValue = {
 
 type MenuAlign = NonNullable<DropdownMenuContentProps["align"]>;
 
-type MenuPosition = { top: number; left: number };
+type MenuPosition = { top: number; left: number; triggerTop: number; bottomLimit: number };
 
 type TriggerPosition = NonNullable<
   ReturnType<typeof DropdownMenuPrimitive.useRootContext>["triggerPosition"]
@@ -91,6 +105,13 @@ function DropdownMenu({ children, ...props }: DropdownMenuProps) {
   );
 }
 
+const TRIGGER_MIN_SIZE: ViewStyle = {
+  minWidth: 32,
+  minHeight: 32,
+  alignItems: "center",
+  justifyContent: "center",
+};
+
 const DropdownMenuTrigger = forwardRef<
   DropdownMenuPrimitive.TriggerRef,
   DropdownMenuTriggerProps
@@ -102,15 +123,11 @@ const DropdownMenuTrigger = forwardRef<
       accessibilityRole="button"
       hitSlop={6}
       className={cn("items-center justify-center", className)}
-      style={(state) => [
-        {
-          minWidth: 32,
-          minHeight: 32,
-          alignItems: "center",
-          justifyContent: "center",
-        },
-        typeof style === "function" ? style(state) : style,
-      ]}
+      style={
+        typeof style === "function"
+          ? (state: PressableStateCallbackType) => [TRIGGER_MIN_SIZE, style(state)]
+          : [TRIGGER_MIN_SIZE, style]
+      }
       {...props}
     >
       {children}
@@ -142,12 +159,22 @@ function computeMenuPosition({
   const rawLeft = triggerPosition.pageX + alignOffset[align] - hostOrigin.x;
   const maxLeft = windowWidth - hostOrigin.x - MENU_WIDTH - MENU_EDGE_GAP;
 
+  const triggerTop = triggerPosition.pageY - hostOrigin.y;
+
   return {
     left: Math.max(MENU_EDGE_GAP, Math.min(rawLeft, maxLeft)),
-    top: triggerPosition.pageY + triggerPosition.height + sideOffset - hostOrigin.y,
+    top: triggerTop + triggerPosition.height + sideOffset,
+    triggerTop,
+    bottomLimit: hostOrigin.height - MENU_EDGE_GAP,
   };
 }
 
+function resolveMenuTop(position: MenuPosition, menuHeight: number, sideOffset: number) {
+  if (position.top + menuHeight <= position.bottomLimit) return position.top;
+
+  return Math.max(MENU_EDGE_GAP, position.triggerTop - sideOffset - menuHeight);
+}
+
 function DropdownMenuContent({
   className,
   align = "end",
@@ -160,6 +187,8 @@ function DropdownMenuContent({
   const { close } = useMenuActions();
   const { open, triggerPosition } = DropdownMenuPrimitive.useRootContext();
   const [menuPosition, setMenuPosition] = useState<MenuPosition | null>(null);
+  const [menuHeight, setMenuHeight] = useState<number | null>(null);
+  const isMenuMounted = menuPosition !== null;
   const surfaceColor = useThemeColor("surface-elevated");
   const borderColor = useThemeColor("gray-stroke-muted");
   const backdropColor = useThemeColor("black-48");
@@ -167,6 +196,7 @@ function DropdownMenuContent({
   useEffect(() => {
     if (!open || !triggerPosition) {
       setMenuPosition(null);
+      setMenuHeight(null);
       return;
     }
 
@@ -208,13 +238,18 @@ function DropdownMenuContent({
             style={[
               styles.menu,
               {
-                top: menuPosition.top,
+                top:
+                  menuHeight === null
+                    ? menuPosition.top
+                    : resolveMenuTop(menuPosition, menuHeight, sideOffset),
                 left: menuPosition.left,
                 width: MENU_WIDTH,
                 backgroundColor: surfaceColor,
                 borderColor,
+                opacity: menuHeight === null ? 0 : 1,
               },
             ]}
+            onLayout={(event) => setMenuHeight(event.nativeEvent.layout.height)}
           >
             {children}
           </View>
@@ -228,12 +263,25 @@ function DropdownMenuContent({
     className,
     close,
     id,
+    menuHeight,
     menuPosition,
     overlay,
     showOverlay,
+    sideOffset,
     surfaceColor,
   ]);
 
+  useEffect(() => {
+    if (!isMenuMounted) return;
+
+    const subscription = BackHandler.addEventListener("hardwareBackPress", () => {
+      close();
+      return true;
+    });
+
+    return () => subscription.remove();
+  }, [close, isMenuMounted]);
+
   useEffect(() => () => overlay.unmount(id), [id, overlay]);
 
   return null;

package/src/components/EmptyState.tsx

@@ -17,9 +17,9 @@ type EmptyStateVariant = "regular" | "emphasis" | "success" | "warning" | "error
 const ICON_BACKGROUND_BY_VARIANT: Record<EmptyStateVariant, string> = {
   regular: "bg-gray-background-soft",
   emphasis: "bg-secondary-background-soft",
-  success: "bg-green-background-soft",
-  warning: "bg-yellow-background-soft",
-  error: "bg-red-background-soft",
+  success: "bg-feedback-success-background-soft",
+  warning: "bg-feedback-warning-background-soft",
+  error: "bg-feedback-error-background-soft",
 };
 
 function EmptyState({