@medway-ui/native 1.9.2 → 1.10.1

package/src/components/Button.tsx

@@ -91,23 +91,23 @@ const buttonVariants = cva(
         "emphasis-basic":
           "bg-transparent active:bg-secondary-background-soft-emphasis disabled:bg-transparent",
         error:
-          "bg-red-background-fill active:bg-red-background-fill-emphasis disabled:bg-gray-background-fill-muted",
+          "bg-feedback-error-background-fill active:bg-feedback-error-background-fill-emphasis disabled:bg-gray-background-fill-muted",
         "error-soft":
-          "bg-red-background-soft active:bg-red-background-soft-emphasis disabled:bg-gray-background-soft-muted",
+          "bg-feedback-error-background-soft active:bg-feedback-error-background-soft-emphasis disabled:bg-gray-background-soft-muted",
         "error-basic":
-          "bg-transparent active:bg-red-background-soft-emphasis disabled:bg-transparent",
+          "bg-transparent active:bg-feedback-error-background-soft-emphasis disabled:bg-transparent",
         warning:
-          "bg-yellow-background-fill active:bg-yellow-background-fill-emphasis disabled:bg-gray-background-fill-muted",
+          "bg-feedback-warning-background-fill active:bg-feedback-warning-background-fill-emphasis disabled:bg-gray-background-fill-muted",
         "warning-soft":
-          "bg-yellow-background-soft active:bg-yellow-background-soft-emphasis disabled:bg-gray-background-soft-muted",
+          "bg-feedback-warning-background-soft active:bg-feedback-warning-background-soft-emphasis disabled:bg-gray-background-soft-muted",
         "warning-basic":
-          "bg-transparent active:bg-yellow-background-soft-emphasis disabled:bg-transparent",
+          "bg-transparent active:bg-feedback-warning-background-soft-emphasis disabled:bg-transparent",
         success:
-          "bg-green-background-fill active:bg-green-background-fill-emphasis disabled:bg-gray-background-fill-muted",
+          "bg-feedback-success-background-fill active:bg-feedback-success-background-fill-emphasis disabled:bg-gray-background-fill-muted",
         "success-soft":
-          "bg-green-background-soft active:bg-green-background-soft-emphasis disabled:bg-gray-background-soft-muted",
+          "bg-feedback-success-background-soft active:bg-feedback-success-background-soft-emphasis disabled:bg-gray-background-soft-muted",
         "success-basic":
-          "bg-transparent active:bg-green-background-soft-emphasis disabled:bg-transparent",
+          "bg-transparent active:bg-feedback-success-background-soft-emphasis disabled:bg-transparent",
         outlined:
           "border border-gray-stroke-muted bg-transparent active:bg-state-hover disabled:border-gray-stroke-muted",
         gradient:
@@ -132,24 +132,24 @@ const buttonVariants = cva(
 const buttonTextVariants = cva("font-semibold shrink-0", {
   variants: {
     variant: {
-      regular: "text-primary-foreground-onfill disabled:text-gray-foreground-onfill",
-      "regular-soft": "text-primary-foreground disabled:text-gray-foreground-muted",
-      "regular-basic": "text-primary-foreground disabled:text-gray-foreground-muted",
-      emphasis: "text-secondary-foreground-onfill disabled:text-gray-foreground-onfill",
-      "emphasis-soft": "text-secondary-foreground disabled:text-gray-foreground-muted",
-      "emphasis-basic": "text-secondary-foreground disabled:text-gray-foreground-muted",
-      error: "text-red-foreground-onfill disabled:text-gray-foreground-onfill",
-      "error-soft": "text-red-foreground disabled:text-gray-foreground-muted",
-      "error-basic": "text-red-foreground disabled:text-gray-foreground-muted",
-      warning: "text-yellow-foreground-onfill disabled:text-gray-foreground-onfill",
-      "warning-soft": "text-yellow-foreground disabled:text-gray-foreground-muted",
-      "warning-basic": "text-yellow-foreground disabled:text-gray-foreground-muted",
-      success: "text-green-foreground-onfill disabled:text-gray-foreground-onfill",
-      "success-soft": "text-green-foreground disabled:text-gray-foreground-muted",
-      "success-basic": "text-green-foreground disabled:text-gray-foreground-muted",
-      outlined: "text-foreground disabled:text-gray-foreground-muted",
-      gradient: "text-white disabled:text-gray-foreground-onfill",
-      medbrain: "text-secondary disabled:text-gray-foreground-onfill",
+      regular: "text-primary-foreground-onfill",
+      "regular-soft": "text-primary-foreground",
+      "regular-basic": "text-primary-foreground",
+      emphasis: "text-secondary-foreground-onfill",
+      "emphasis-soft": "text-secondary-foreground",
+      "emphasis-basic": "text-secondary-foreground",
+      error: "text-feedback-error-foreground-onfill",
+      "error-soft": "text-feedback-error-foreground",
+      "error-basic": "text-feedback-error-foreground",
+      warning: "text-feedback-warning-foreground-onfill",
+      "warning-soft": "text-feedback-warning-foreground",
+      "warning-basic": "text-feedback-warning-foreground",
+      success: "text-feedback-success-foreground-onfill",
+      "success-soft": "text-feedback-success-foreground",
+      "success-basic": "text-feedback-success-foreground",
+      outlined: "text-foreground",
+      gradient: "text-white",
+      medbrain: "text-secondary",
     },
     size: {
       sm: "text-xs",
@@ -157,10 +157,39 @@ const buttonTextVariants = cva("font-semibold shrink-0", {
       lg: "text-md",
       xl: "text-lg",
     },
+    disabled: {
+      true: "",
+      false: "",
+    },
   },
+  compoundVariants: [
+    {
+      variant: ["regular", "emphasis", "error", "warning", "success", "gradient", "medbrain"],
+      disabled: true,
+      className: "text-gray-foreground-onfill",
+    },
+    {
+      variant: [
+        "regular-soft",
+        "regular-basic",
+        "emphasis-soft",
+        "emphasis-basic",
+        "error-soft",
+        "error-basic",
+        "warning-soft",
+        "warning-basic",
+        "success-soft",
+        "success-basic",
+        "outlined",
+      ],
+      disabled: true,
+      className: "text-gray-foreground-muted",
+    },
+  ],
   defaultVariants: {
     variant: "regular",
     size: "md",
+    disabled: false,
   },
 });
 
@@ -185,6 +214,10 @@ function Button({
   const resolvedSize = size ?? "md";
   const resolvedVariant = variant ?? "regular";
   const isIconOnly = !children && !alert && (!!iconLeft || !!iconRight);
+  const isDisabled = !!disabled || loading;
+  const textClassName = cn(
+    buttonTextVariants({ variant: resolvedVariant, size, disabled: isDisabled })
+  );
 
   return (
     <View style={[{ position: "relative" }, containerStyle]}>
@@ -197,9 +230,9 @@ function Button({
       )}
 
       <Pressable
-        disabled={disabled || loading}
+        disabled={isDisabled}
         accessibilityRole="button"
-        accessibilityState={{ disabled: disabled || loading, busy: loading }}
+        accessibilityState={{ disabled: isDisabled, busy: loading }}
         className={cn(
           buttonVariants({ variant, size }),
           isIconOnly && ICON_ONLY_SIZES[resolvedSize],
@@ -218,7 +251,7 @@ function Button({
             <View className="opacity-0 flex-row items-center gap-2">
               {iconLeft}
               {children != null && (
-                <Text className={cn(buttonTextVariants({ variant: resolvedVariant, size }))}>
+                <Text className={textClassName}>
                   {children}
                 </Text>
               )}
@@ -242,7 +275,7 @@ function Button({
               iconLeft
             )}
             {children != null && (
-              <Text className={cn(buttonTextVariants({ variant: resolvedVariant, size }))}>
+              <Text className={textClassName}>
                 {children}
               </Text>
             )}

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}
     />
   );