@cdx-ui/components 0.0.1-beta.98 → 0.1.0

package/lib/module/components/DateTimePicker/index.js

@@ -0,0 +1,183 @@
+"use strict";
+
+import { forwardRef, useCallback, useEffect, useMemo, useRef } from 'react';
+import { Schedule } from '@cdx-ui/icons';
+import { dataAttributes, DateTimePickerContext, DateTimePickerRoot as DateTimePickerRootPrimitive, mergeDataAttributes, useDateTimePickerContext } from '@cdx-ui/primitives';
+import { clampDateTimeId, nowDateTimeId } from '@cdx-ui/formatters';
+import { cn, ParentContext, useParentContext } from '@cdx-ui/utils';
+import { Dialog } from '../Dialog';
+import { Icon } from '../Icon';
+import { DateTimeList } from '../DateTimeList';
+import { PickerTrigger } from '../picker/PickerTrigger';
+import { PickerBottomSheetSurface, PickerDialogSurface, PickerPopoverSurface } from '../picker/surfaces';
+import { jsx as _jsx } from "react/jsx-runtime";
+const DATE_FIELD_SCOPE = 'DATE_FIELD';
+const DateTimePickerRoot = /*#__PURE__*/forwardRef(({
+  className,
+  children,
+  style,
+  ...props
+}, ref) => {
+  const parent = useParentContext();
+  const ctx = useMemo(() => ({
+    ...parent,
+    [DATE_FIELD_SCOPE]: {
+      variant: 'outline',
+      size: 'default',
+      fullWidth: true
+    }
+  }), [parent]);
+  return /*#__PURE__*/_jsx(ParentContext.Provider, {
+    value: ctx,
+    children: /*#__PURE__*/_jsx(DateTimePickerRootPrimitive, {
+      ref: ref,
+      className: cn('gap-2', className),
+      style: style,
+      ...props,
+      ...mergeDataAttributes(props, dataAttributes({
+        slot: 'date-time-picker'
+      })),
+      children: children
+    })
+  });
+});
+DateTimePickerRoot.displayName = 'DateTimePicker';
+const DateTimePickerTrigger = /*#__PURE__*/forwardRef(({
+  accessibilityLabel,
+  ...props
+}, ref) => {
+  const {
+    open,
+    setOpen,
+    disabled,
+    triggerRef,
+    labels
+  } = useDateTimePickerContext();
+  return /*#__PURE__*/_jsx(PickerTrigger, {
+    ref: ref,
+    open: open,
+    setOpen: setOpen,
+    disabled: disabled,
+    triggerRef: triggerRef,
+    accessibilityLabel: accessibilityLabel ?? labels.openDateTimePicker,
+    ...props
+  });
+});
+DateTimePickerTrigger.displayName = 'DateTimePicker.Trigger';
+const DateTimePickerTriggerIndicator = () => /*#__PURE__*/_jsx(Icon, {
+  as: Schedule,
+  className: "text-content-secondary"
+});
+DateTimePickerTriggerIndicator.displayName = 'DateTimePicker.TriggerIndicator';
+const DateTimePickerList = /*#__PURE__*/forwardRef(({
+  ...props
+}, ref) => {
+  const {
+    value,
+    onValueChange,
+    draftValue,
+    setDraftValue,
+    open,
+    granularity,
+    locale,
+    hour12,
+    minValue,
+    maxValue
+  } = useDateTimePickerContext();
+  const userInteractedRef = useRef(false);
+  useEffect(() => {
+    if (open) {
+      userInteractedRef.current = false;
+    }
+  }, [open]);
+  const handleUserInteract = useCallback(() => {
+    userInteractedRef.current = true;
+  }, []);
+  const handleValueChange = useCallback(next => {
+    setDraftValue(next);
+    if (!open) {
+      onValueChange?.(next);
+      return;
+    }
+    if (value !== undefined || userInteractedRef.current) {
+      onValueChange?.(next);
+    }
+  }, [onValueChange, open, setDraftValue, value]);
+  const listValue = open ? draftValue ?? clampDateTimeId(value ?? nowDateTimeId({
+    granularity
+  }), {
+    min: minValue,
+    max: maxValue
+  }) : value;
+  return /*#__PURE__*/_jsx(DateTimeList, {
+    ref: ref,
+    value: listValue,
+    onValueChange: handleValueChange,
+    onUserInteract: handleUserInteract,
+    granularity: granularity,
+    locale: locale,
+    hour12: hour12,
+    minValue: minValue,
+    maxValue: maxValue,
+    ...props
+  });
+});
+DateTimePickerList.displayName = 'DateTimePicker.List';
+function DateTimePickerDialog({
+  children
+}) {
+  const ctx = useDateTimePickerContext();
+  return /*#__PURE__*/_jsx(PickerDialogSurface, {
+    open: ctx.open,
+    setOpen: ctx.setOpen,
+    registerSurface: ctx.registerSurface,
+    children: /*#__PURE__*/_jsx(Dialog.Popup, {
+      className: "p-4",
+      children: /*#__PURE__*/_jsx(DateTimePickerContext.Provider, {
+        value: ctx,
+        children: children
+      })
+    })
+  });
+}
+function DateTimePickerBottomSheet({
+  children
+}) {
+  const ctx = useDateTimePickerContext();
+  return /*#__PURE__*/_jsx(PickerBottomSheetSurface, {
+    open: ctx.open,
+    setOpen: ctx.setOpen,
+    registerSurface: ctx.registerSurface,
+    children: /*#__PURE__*/_jsx(DateTimePickerContext.Provider, {
+      value: ctx,
+      children: children
+    })
+  });
+}
+function DateTimePickerPopover({
+  children,
+  className
+}) {
+  const ctx = useDateTimePickerContext();
+  return /*#__PURE__*/_jsx(PickerPopoverSurface, {
+    open: ctx.open,
+    setOpen: ctx.setOpen,
+    registerSurface: ctx.registerSurface,
+    anchorRef: ctx.anchorRef,
+    triggerRef: ctx.triggerRef,
+    className: className,
+    children: /*#__PURE__*/_jsx(DateTimePickerContext.Provider, {
+      value: ctx,
+      children: children
+    })
+  });
+}
+export const DateTimePicker = Object.assign(DateTimePickerRoot, {
+  Trigger: DateTimePickerTrigger,
+  TriggerIndicator: DateTimePickerTriggerIndicator,
+  List: DateTimePickerList,
+  Popover: DateTimePickerPopover,
+  Dialog: DateTimePickerDialog,
+  BottomSheet: DateTimePickerBottomSheet
+});
+//# sourceMappingURL=index.js.map

package/lib/module/components/DateTimePicker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["forwardRef","useCallback","useEffect","useMemo","useRef","Schedule","dataAttributes","DateTimePickerContext","DateTimePickerRoot","DateTimePickerRootPrimitive","mergeDataAttributes","useDateTimePickerContext","clampDateTimeId","nowDateTimeId","cn","ParentContext","useParentContext","Dialog","Icon","DateTimeList","PickerTrigger","PickerBottomSheetSurface","PickerDialogSurface","PickerPopoverSurface","jsx","_jsx","DATE_FIELD_SCOPE","className","children","style","props","ref","parent","ctx","variant","size","fullWidth","Provider","value","slot","displayName","DateTimePickerTrigger","accessibilityLabel","open","setOpen","disabled","triggerRef","labels","openDateTimePicker","DateTimePickerTriggerIndicator","as","DateTimePickerList","onValueChange","draftValue","setDraftValue","granularity","locale","hour12","minValue","maxValue","userInteractedRef","current","handleUserInteract","handleValueChange","next","undefined","listValue","min","max","onUserInteract","DateTimePickerDialog","registerSurface","Popup","DateTimePickerBottomSheet","DateTimePickerPopover","anchorRef","DateTimePicker","Object","assign","Trigger","TriggerIndicator","List","Popover","BottomSheet"],"sourceRoot":"../../../../src","sources":["components/DateTimePicker/index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/Dialog/animation.js

@@ -0,0 +1,7 @@
+"use strict";
+
+import { createContext } from '@cdx-ui/utils';
+export const [DialogAnimationProvider, useDialogAnimation] = createContext('DialogAnimationContext', {
+  strict: false
+});
+//# sourceMappingURL=animation.js.map

package/lib/module/components/Dialog/animation.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createContext","DialogAnimationProvider","useDialogAnimation","strict"],"sourceRoot":"../../../../src","sources":["components/Dialog/animation.ts"],"mappings":";;AACA,SAASA,aAAa,QAAQ,eAAe;AAQ7C,OAAO,MAAM,CAACC,uBAAuB,EAAEC,kBAAkB,CAAC,GACxDF,aAAa,CAA8B,wBAAwB,EAAE;EACnEG,MAAM,EAAE;AACV,CAAC,CAAC","ignoreList":[]}

package/lib/module/components/Dialog/index.js

@@ -1,15 +1,21 @@
 "use strict";
 
-import { forwardRef, useMemo } from 'react';
-import { Text, View } from 'react-native';
+import { forwardRef, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { KeyboardAvoidingView, Platform, StyleSheet, Text, View } from 'react-native';
+import { GestureDetector } from 'react-native-gesture-handler';
+import Animated, { useSharedValue } from 'react-native-reanimated';
 import { CheckCircle, Close as CloseIcon, EmergencyHome, Warning } from '@cdx-ui/icons';
-import { DialogClose as DialogClosePrimitive, DialogPopup as DialogPopupPrimitive, DialogRoot as DialogRootPrimitive, DialogTrigger as DialogTriggerPrimitive, Slot, dataAttributes, mergeDataAttributes, useDialog } from '@cdx-ui/primitives';
-import { cn, ParentContext, useParentContext, useStyleContext } from '@cdx-ui/utils';
+import { DialogClose as DialogClosePrimitive, DialogContent as DialogContentPrimitive, DialogOverlay as DialogOverlayPrimitive, DialogPortal as DialogPortalPrimitive, DialogRoot as DialogRootPrimitive, DialogTrigger as DialogTriggerPrimitive, FullWindowOverlay, MODAL_OVERLAY_Z_INDEX, Slot, dataAttributes, mergeDataAttributes, useDialog } from '@cdx-ui/primitives';
+import { cn, mergeRefs, ParentContext, useParentContext, useStyleContext } from '@cdx-ui/utils';
+import { usePopupDialogContentAnimation, usePopupOverlayAnimation, usePopupRootAnimation } from '../../animation';
+import { AnimationSettingsProvider, useAnimationSettings } from '../../providers/animation-settings';
 import { Icon } from '../Icon';
-import { dialogCloseIconVariants, dialogCloseVariants, dialogContentVariants, dialogDescriptionVariants, dialogFooterVariants, dialogHeaderVariants, dialogOverlayVariants, dialogPopupVariants, dialogTextVariants, dialogTitleIconVariants, dialogTitleVariants } from './styles';
+import { DialogAnimationProvider, useDialogAnimation } from './animation';
+import { dialogCloseIconVariants, dialogCloseVariants, dialogContentVariants, dialogDescriptionVariants, dialogFooterVariants, dialogHeaderVariants, dialogOverlayVariants, dialogPopupVariants, dialogPortalVariants, dialogTextVariants, dialogTitleIconVariants, dialogTitleVariants } from './styles';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export { useDialog } from '@cdx-ui/primitives';
-
+const IS_WEB = Platform.OS === 'web';
+const WEB_TRANSITION_SAFETY_MS = 300;
 // =============================================================================
 // STYLE CONTEXT
 // =============================================================================
@@ -17,6 +23,12 @@ export { useDialog } from '@cdx-ui/primitives';
 const SCOPE = 'DIALOG';
 const useDialogStyleContext = () => useStyleContext(SCOPE);
 
+// =============================================================================
+// ANIMATED PRIMITIVES
+// =============================================================================
+
+const AnimatedOverlay = Animated.createAnimatedComponent(DialogOverlayPrimitive);
+
 // =============================================================================
 // STYLED ROOT
 // =============================================================================
@@ -24,6 +36,7 @@ const useDialogStyleContext = () => useStyleContext(SCOPE);
 const DialogRoot = /*#__PURE__*/forwardRef(({
   size = 'md',
   fullBleed = false,
+  animation,
   className,
   children,
   style,
@@ -37,17 +50,39 @@ const DialogRoot = /*#__PURE__*/forwardRef(({
       fullBleed
     }
   }), [parent, size, fullBleed]);
-  return /*#__PURE__*/_jsx(ParentContext.Provider, {
-    value: ctx,
-    children: /*#__PURE__*/_jsx(DialogRootPrimitive, {
-      ref: ref,
-      className: className,
-      style: style,
-      ...props,
-      ...mergeDataAttributes(props, dataAttributes({
-        slot: 'dialog'
-      })),
-      children: children
+  const {
+    progress,
+    isDragging,
+    isGestureReleaseAnimationRunning,
+    isAllAnimationsDisabled
+  } = usePopupRootAnimation({
+    animation
+  });
+  const animationContextValue = useMemo(() => ({
+    progress,
+    isDragging,
+    isGestureReleaseAnimationRunning
+  }), [progress, isDragging, isGestureReleaseAnimationRunning]);
+  const animationSettingsContextValue = useMemo(() => ({
+    isAllAnimationsDisabled
+  }), [isAllAnimationsDisabled]);
+  return /*#__PURE__*/_jsx(AnimationSettingsProvider, {
+    value: animationSettingsContextValue,
+    children: /*#__PURE__*/_jsx(DialogAnimationProvider, {
+      value: animationContextValue,
+      children: /*#__PURE__*/_jsx(ParentContext.Provider, {
+        value: ctx,
+        children: /*#__PURE__*/_jsx(DialogRootPrimitive, {
+          ref: ref,
+          className: className,
+          style: style,
+          ...props,
+          ...mergeDataAttributes(props, dataAttributes({
+            slot: 'dialog'
+          })),
+          children: children
+        })
+      })
     })
   });
 });
@@ -75,7 +110,7 @@ const DialogTrigger = /*#__PURE__*/forwardRef(({
 DialogTrigger.displayName = 'Dialog.Trigger';
 
 // =============================================================================
-// STYLED POPUP
+// STYLED POPUP (portal + overlay + content composition)
 // =============================================================================
 
 const DialogPopup = /*#__PURE__*/forwardRef(({
@@ -83,26 +118,221 @@ const DialogPopup = /*#__PURE__*/forwardRef(({
   className,
   children,
   style,
+  forceMount = false,
+  avoidKeyboard = true,
+  keyboardVerticalOffset = 0,
+  disableFullWindowOverlay = false,
+  isSwipeable = true,
+  zIndex = MODAL_OVERLAY_Z_INDEX,
   ...props
 }, ref) => {
   const {
     size: contextSize
   } = useDialogStyleContext();
   const size = sizeProp ?? contextSize;
-  const computedClassName = cn(dialogPopupVariants({
+  const {
+    open,
+    onOpenChange
+  } = useDialog();
+  const parentContext = useParentContext();
+  const animationContext = useDialogAnimation();
+  const parentAnimationSettings = useAnimationSettings();
+  const fallbackProgress = useSharedValue(0);
+  const fallbackIsDragging = useSharedValue(false);
+  const fallbackIsGestureReleaseAnimationRunning = useSharedValue(false);
+  const progress = animationContext?.progress ?? fallbackProgress;
+  const isDragging = animationContext?.isDragging ?? fallbackIsDragging;
+  const isGestureReleaseAnimationRunning = animationContext?.isGestureReleaseAnimationRunning ?? fallbackIsGestureReleaseAnimationRunning;
+  const {
+    rContainerStyle,
+    entering: overlayEntering,
+    exiting: overlayExiting
+  } = usePopupOverlayAnimation({
+    progress,
+    isDragging,
+    isGestureReleaseAnimationRunning
+  });
+  const {
+    contentY,
+    contentHeight,
+    panGesture,
+    rDragContainerStyle,
+    entering: contentEntering,
+    exiting: contentExiting
+  } = usePopupDialogContentAnimation({
+    isOpen: open,
+    progress,
+    isDragging,
+    isGestureReleaseAnimationRunning,
+    onOpenChange,
+    isSwipeable
+  });
+  const dragContainerRef = useRef(null);
+  useLayoutEffect(() => {
+    if (!open || IS_WEB) return;
+    dragContainerRef.current?.measure((_x, _y, _width, height, _pageX, pageY) => {
+      contentY.set(pageY);
+      contentHeight.set(height);
+    });
+  }, [open, contentY, contentHeight]);
+
+  // ---- Web enter/exit lifecycle ----
+  // Mirrors the Toast pattern: mount → 'entering' → (rAF) → 'open' → (close)
+  // → 'closed' → (transitionend) → unmount.
+  //
+  // Critical: `isExiting` is derived synchronously (via ref tracking the previous
+  // `open` value) so the component stays mounted in the SAME render that sees
+  // `open` go false — if we used useEffect the component would return null before
+  // the effect fires.
+  //
+  // The transitionend listener targets the popup element (via popupRef) instead of
+  // the portal wrapper. CSS exit transitions live on the overlay and popup children,
+  // not the wrapper — listening on the wrapper would unmount on the first bubbled
+  // event, potentially cutting the other child's animation short.
+  const wrapperRef = useRef(null);
+  const popupRef = useRef(null);
+  const prevOpenRef = useRef(open);
+  const [isExiting, setIsExiting] = useState(false);
+  const [webState, setWebState] = useState(open ? 'entering' : 'closed');
+
+  // Detect open → false transition synchronously during render
+  if (IS_WEB && prevOpenRef.current && !open && !isExiting) {
+    setIsExiting(true);
+    setWebState('closed');
+  }
+  // Detect closed → open transition synchronously during render
+  if (IS_WEB && !prevOpenRef.current && open) {
+    setIsExiting(false);
+    setWebState('entering');
+  }
+  prevOpenRef.current = open;
+
+  // Entrance: commit 'entering' on first paint, then transition to 'open'
+  useEffect(() => {
+    if (!IS_WEB || !open) return;
+    const raf = requestAnimationFrame(() => {
+      setWebState('open');
+    });
+    return () => cancelAnimationFrame(raf);
+  }, [open]);
+
+  // Exit: wait for CSS transition to finish, then unmount.
+  // Listens on the popup element directly — its exit transitions (opacity +
+  // transform) are at least as long as the overlay's, so when the popup
+  // finishes both children are done animating.
+  useEffect(() => {
+    if (!IS_WEB || !isExiting) return;
+    const node = popupRef.current;
+    let done = false;
+    const finish = () => {
+      if (done) return;
+      done = true;
+      setIsExiting(false);
+    };
+    const safetyTimer = setTimeout(finish, WEB_TRANSITION_SAFETY_MS);
+    if (!node || typeof node.addEventListener !== 'function') {
+      return () => {
+        clearTimeout(safetyTimer);
+      };
+    }
+    const handler = event => {
+      if (event.target !== node) return;
+      const propertyName = event.propertyName ?? '';
+      if (propertyName === 'opacity' || propertyName === 'transform') {
+        finish();
+      }
+    };
+    node.addEventListener('transitionend', handler);
+    return () => {
+      clearTimeout(safetyTimer);
+      node.removeEventListener('transitionend', handler);
+    };
+  }, [isExiting]);
+  const dataState = webState;
+  const shouldMount = IS_WEB ? open || isExiting : open;
+  if (!forceMount && !shouldMount) {
+    return null;
+  }
+  const portalClassName = cn(dialogPortalVariants());
+  const overlayClassName = cn(dialogOverlayVariants());
+  const popupClassName = cn(dialogPopupVariants({
     size
   }), className);
-  const overlayClassName = cn(dialogOverlayVariants());
-  return /*#__PURE__*/_jsx(DialogPopupPrimitive, {
-    ref: ref,
-    className: computedClassName,
-    style: style,
-    overlayClassName: overlayClassName,
-    ...props,
-    ...mergeDataAttributes(props, dataAttributes({
-      slot: 'dialog-popup'
-    })),
-    children: children
+  const keyboardBehavior = avoidKeyboard ? Platform.select({
+    ios: 'padding',
+    default: 'height'
+  }) : undefined;
+  return /*#__PURE__*/_jsx(DialogPortalPrimitive, {
+    forceMount: true,
+    children: /*#__PURE__*/_jsx(ParentContext.Provider, {
+      value: parentContext,
+      children: /*#__PURE__*/_jsx(AnimationSettingsProvider, {
+        value: parentAnimationSettings,
+        children: /*#__PURE__*/_jsx(DialogAnimationProvider, {
+          value: animationContext,
+          children: /*#__PURE__*/_jsx(FullWindowOverlay, {
+            disableFullWindowOverlay: disableFullWindowOverlay,
+            unstable_accessibilityContainerViewIsModal: true,
+            children: /*#__PURE__*/_jsxs(Animated.View, {
+              ref: wrapperRef,
+              className: portalClassName,
+              style: {
+                zIndex
+              },
+              pointerEvents: "box-none",
+              ...(IS_WEB ? dataAttributes({
+                state: dataState
+              }) : undefined),
+              children: [/*#__PURE__*/_jsx(Animated.View, {
+                entering: overlayEntering,
+                exiting: overlayExiting,
+                style: StyleSheet.absoluteFill,
+                children: /*#__PURE__*/_jsx(AnimatedOverlay, {
+                  forceMount: true,
+                  className: overlayClassName,
+                  style: IS_WEB ? undefined : rContainerStyle,
+                  ...(IS_WEB ? dataAttributes({
+                    state: dataState
+                  }) : undefined)
+                })
+              }), /*#__PURE__*/_jsx(GestureDetector, {
+                gesture: panGesture,
+                children: /*#__PURE__*/_jsx(Animated.View, {
+                  ref: dragContainerRef,
+                  style: internalStyles.fill,
+                  pointerEvents: "box-none",
+                  entering: contentEntering,
+                  exiting: contentExiting,
+                  children: /*#__PURE__*/_jsx(Animated.View, {
+                    style: IS_WEB ? internalStyles.fill : [internalStyles.fill, rDragContainerStyle],
+                    pointerEvents: "box-none",
+                    children: /*#__PURE__*/_jsx(KeyboardAvoidingView, {
+                      style: internalStyles.center,
+                      pointerEvents: "box-none",
+                      behavior: keyboardBehavior,
+                      keyboardVerticalOffset: keyboardVerticalOffset,
+                      children: /*#__PURE__*/_jsx(DialogContentPrimitive, {
+                        ref: mergeRefs(ref, popupRef),
+                        forceMount: true,
+                        className: popupClassName,
+                        style: style,
+                        ...props,
+                        ...mergeDataAttributes(props, dataAttributes({
+                          slot: 'dialog-popup'
+                        }), IS_WEB ? dataAttributes({
+                          state: dataState
+                        }) : undefined),
+                        children: children
+                      })
+                    })
+                  })
+                })
+              })]
+            })
+          })
+        })
+      })
+    })
   });
 });
 DialogPopup.displayName = 'Dialog.Popup';
@@ -134,26 +364,45 @@ const DialogHeader = /*#__PURE__*/forwardRef(({
 DialogHeader.displayName = 'Dialog.Header';
 
 // =============================================================================
-// STYLED TITLE (styled-only sub-slot with appearance variants)
+// STYLED TITLE (styled-only sub-slot with severity variants)
 // =============================================================================
 
-const APPEARANCE_ICON_MAP = {
+/** @deprecated Use `severity` prop instead of `appearance`. */
+
+let hasWarnedDialogAppearanceProp = false;
+let hasWarnedDialogDefaultSeverity = false;
+const SEVERITY_ICON_MAP = {
   danger: EmergencyHome,
   warning: Warning,
   success: CheckCircle
 };
 const DialogTitle = /*#__PURE__*/forwardRef(({
   asChild,
-  appearance = 'default',
+  severity: severityProp,
+  appearance,
   className,
   children,
   style,
   ...props
 }, ref) => {
+  useEffect(() => {
+    if (__DEV__ && appearance !== undefined && !hasWarnedDialogAppearanceProp) {
+      hasWarnedDialogAppearanceProp = true;
+      console.warn('[Dialog.Title] The `appearance` prop is deprecated and will be removed in a future major release. Use `severity` instead.');
+    }
+  }, [appearance]);
+  const rawSeverity = severityProp ?? appearance ?? 'neutral';
+  useEffect(() => {
+    if (__DEV__ && rawSeverity === 'default' && !hasWarnedDialogDefaultSeverity) {
+      hasWarnedDialogDefaultSeverity = true;
+      console.warn('[Dialog.Title] The `default` severity value is deprecated and will be removed in a future major release. Use `neutral` instead.');
+    }
+  }, [rawSeverity]);
+  const severity = rawSeverity === 'default' ? 'neutral' : rawSeverity;
   const computedClassName = cn(dialogTitleVariants({
-    appearance
+    severity
   }), className);
-  const IconComponent = appearance && appearance in APPEARANCE_ICON_MAP ? APPEARANCE_ICON_MAP[appearance] : null;
+  const IconComponent = severity && severity in SEVERITY_ICON_MAP ? SEVERITY_ICON_MAP[severity] : null;
   const Comp = asChild ? Slot : Text;
   const titleElement = /*#__PURE__*/_jsx(Comp, {
     ref: ref,
@@ -171,7 +420,7 @@ const DialogTitle = /*#__PURE__*/forwardRef(({
       children: [/*#__PURE__*/_jsx(Icon, {
         as: IconComponent,
         className: dialogTitleIconVariants({
-          appearance
+          severity
         })
       }), titleElement]
     });
@@ -339,4 +588,20 @@ export const Dialog = Object.assign(DialogRoot, {
   Footer: DialogFooter,
   Close: DialogClose
 });
+export { MODAL_OVERLAY_Z_INDEX };
+
+// =============================================================================
+// INTERNAL STYLES
+// =============================================================================
+
+const internalStyles = StyleSheet.create({
+  fill: {
+    flex: 1
+  },
+  center: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});
 //# sourceMappingURL=index.js.map