@expo/ui 56.0.7 → 56.0.9

package/src/swift-ui/Alert/index.tsx

@@ -0,0 +1,87 @@
+import { requireNativeView } from 'expo';
+import type { NativeSyntheticEvent } from 'react-native';
+
+import { Slot } from '../SlotView';
+import { createViewModifierEventListener } from '../modifiers/utils';
+import { type CommonViewModifierProps } from '../types';
+
+/**
+ * Props of the `Alert` component.
+ */
+export type AlertProps = {
+  /**
+   * The contents of the alert.
+   * Should include `Alert.Trigger`, `Alert.Actions`, and optionally `Alert.Message`.
+   */
+  children: React.ReactNode;
+  /**
+   * The title of the alert.
+   */
+  title: string;
+  /**
+   * Whether the alert is presented.
+   */
+  isPresented?: boolean;
+  /**
+   * A callback that is called when the `isPresented` state changes.
+   */
+  onIsPresentedChange?: (isPresented: boolean) => void;
+} & CommonViewModifierProps;
+
+type NativeAlertProps = Omit<AlertProps, 'onIsPresentedChange'> & {
+  onIsPresentedChange?: (event: NativeSyntheticEvent<{ isPresented: boolean }>) => void;
+};
+
+const AlertNativeView: React.ComponentType<NativeAlertProps> = requireNativeView(
+  'ExpoUI',
+  'AlertView'
+);
+
+/**
+ * The component visible all the time that triggers the alert presentation.
+ */
+function Trigger(props: { children: React.ReactNode }) {
+  return <Slot name="trigger">{props.children}</Slot>;
+}
+
+/**
+ * The action buttons displayed in the alert. Use `Button` components from `@expo/ui/swift-ui` as children.
+ */
+function Actions(props: { children: React.ReactNode }) {
+  return <Slot name="actions">{props.children}</Slot>;
+}
+
+/**
+ * An optional message displayed below the title in the alert.
+ */
+function Message(props: { children: React.ReactNode }) {
+  return <Slot name="message">{props.children}</Slot>;
+}
+
+/**
+ * `Alert` presents a SwiftUI alert with a title, optional message, and action buttons.
+ *
+ * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/view/alert(_:ispresented:actions:message:)).
+ */
+function Alert(props: AlertProps) {
+  const { onIsPresentedChange, modifiers, children, ...restProps } = props;
+
+  const handleIsPresentedChange = (event: NativeSyntheticEvent<{ isPresented: boolean }>) => {
+    onIsPresentedChange?.(event.nativeEvent.isPresented);
+  };
+
+  return (
+    <AlertNativeView
+      {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}
+      {...restProps}
+      onIsPresentedChange={handleIsPresentedChange}>
+      {children}
+    </AlertNativeView>
+  );
+}
+
+Alert.Trigger = Trigger;
+Alert.Actions = Actions;
+Alert.Message = Message;
+
+export { Alert };

package/src/swift-ui/BottomSheet/index.tsx

@@ -1,5 +1,5 @@
 import { requireNativeView } from 'expo';
-import type { ComponentType } from 'react';
+import { useState, type ComponentType } from 'react';
 import type { NativeSyntheticEvent } from 'react-native';
 
 import { createViewModifierEventListener } from '../modifiers/utils';
@@ -21,6 +21,10 @@ export type BottomSheetProps = {
    * Callback function that is called when the `BottomSheet` presented state changes.
    */
   onIsPresentedChange: (isPresented: boolean) => void;
+  /**
+   * Callback function that is called after the `BottomSheet` has been fully dismissed.
+   */
+  onDismiss?: () => void;
   /**
    * When `true`, the sheet will automatically size itself to fit its content.
    * This sets the presentation detent to match the height of the children.
@@ -29,8 +33,9 @@ export type BottomSheetProps = {
   fitToContents?: boolean;
 } & CommonViewModifierProps;
 
-type NativeBottomSheetProps = Omit<BottomSheetProps, 'onIsPresentedChange'> & {
+type NativeBottomSheetProps = Omit<BottomSheetProps, 'onIsPresentedChange' | 'onDismiss'> & {
   onIsPresentedChange: (event: NativeSyntheticEvent<{ isPresented: boolean }>) => void;
+  onDismiss: (event: NativeSyntheticEvent<object>) => void;
 };
 
 const BottomSheetNativeView: ComponentType<NativeBottomSheetProps> = requireNativeView(
@@ -38,23 +43,35 @@ const BottomSheetNativeView: ComponentType<NativeBottomSheetProps> = requireNati
   'BottomSheetView'
 );
 
-function transformBottomSheetProps(props: BottomSheetProps): NativeBottomSheetProps {
-  const { modifiers, ...restProps } = props;
-  return {
-    modifiers,
-    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
-    ...restProps,
-    onIsPresentedChange: ({ nativeEvent: { isPresented } }) => {
-      props?.onIsPresentedChange?.(isPresented);
-    },
-  };
-}
-
 /**
  * `BottomSheet` presents content from the bottom of the screen.
  */
 function BottomSheet(props: BottomSheetProps) {
-  return <BottomSheetNativeView {...transformBottomSheetProps(props)} />;
+  const { modifiers, onIsPresentedChange, onDismiss, ...restProps } = props;
+  const [isMounted, setIsMounted] = useState(props.isPresented);
+
+  if (props.isPresented && !isMounted) {
+    setIsMounted(true);
+  }
+
+  if (!isMounted) {
+    return null;
+  }
+
+  return (
+    <BottomSheetNativeView
+      modifiers={modifiers}
+      {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}
+      {...restProps}
+      onIsPresentedChange={({ nativeEvent: { isPresented } }) => {
+        onIsPresentedChange?.(isPresented);
+      }}
+      onDismiss={() => {
+        setIsMounted(false);
+        onDismiss?.();
+      }}
+    />
+  );
 }
 
 export { BottomSheet };

package/src/swift-ui/SlotView.tsx

@@ -1,8 +1,21 @@
 import { requireNativeView } from 'expo';
 
-const SlotNativeView: React.ComponentType<{ name: string; children?: React.ReactNode }> =
-  requireNativeView('ExpoUI', 'SlotView');
+type SlotProps<ExtraProps extends Record<string, unknown> = Record<string, unknown>> = {
+  name: string;
+  extraProps?: ExtraProps;
+  children?: React.ReactNode;
+};
 
-export function Slot({ name, children }: { name: string; children?: React.ReactNode }) {
-  return <SlotNativeView name={name}>{children}</SlotNativeView>;
+const SlotNativeView: React.ComponentType<SlotProps> = requireNativeView('ExpoUI', 'SlotView');
+
+export function Slot<ExtraProps extends Record<string, unknown> = Record<string, unknown>>({
+  name,
+  extraProps,
+  children,
+}: SlotProps<ExtraProps>) {
+  return (
+    <SlotNativeView name={name} extraProps={extraProps}>
+      {children}
+    </SlotNativeView>
+  );
 }

package/src/swift-ui/SwipeActions/index.tsx

@@ -0,0 +1,73 @@
+import { requireNativeView } from 'expo';
+
+import { Slot } from '../SlotView';
+import { createViewModifierEventListener } from '../modifiers/utils';
+import { type CommonViewModifierProps } from '../types';
+
+export type SwipeActionsEdge = 'leading' | 'trailing';
+
+export type SwipeActionsProps = {
+  /**
+   * The regular content and `SwipeActions.Actions` action groups.
+   */
+  children: React.ReactNode;
+} & CommonViewModifierProps;
+
+export type SwipeActionsGroupProps = {
+  /**
+   * The edge where these swipe actions are revealed.
+   * @default 'trailing'
+   */
+  edge?: SwipeActionsEdge;
+  /**
+   * Whether a full swipe automatically performs the first action in this group.
+   * @default true
+   */
+  allowsFullSwipe?: boolean;
+  /**
+   * The buttons revealed when the user swipes from this edge.
+   */
+  children: React.ReactNode;
+};
+
+type SwipeActionsNativeProps = SwipeActionsProps;
+
+const SwipeActionsNativeView: React.ComponentType<SwipeActionsNativeProps> = requireNativeView(
+  'ExpoUI',
+  'SwipeActionsView'
+);
+
+/**
+ * The buttons revealed when the user swipes the regular content from an edge.
+ */
+export function Actions({
+  edge = 'trailing',
+  allowsFullSwipe = true,
+  children,
+}: SwipeActionsGroupProps) {
+  return (
+    <Slot name="actions" extraProps={{ edge, allowsFullSwipe }}>
+      {children}
+    </Slot>
+  );
+}
+
+/**
+ * Applies native SwiftUI swipe actions to its non-slot children.
+ * @platform ios
+ */
+function SwipeActionsComponent(props: SwipeActionsProps) {
+  const { modifiers, ...restProps } = props;
+
+  return (
+    <SwipeActionsNativeView
+      modifiers={modifiers}
+      {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}
+      {...restProps}
+    />
+  );
+}
+
+const SwipeActions = Object.assign(SwipeActionsComponent, { Actions });
+
+export { SwipeActions };

package/src/swift-ui/index.tsx

@@ -1,6 +1,7 @@
 import '../State/index.fx';
 
 export * from './AccessoryWidgetBackground';
+export * from './Alert';
 export * from './BottomSheet';
 export * from './Button';
 export * from './Chart';
@@ -33,8 +34,10 @@ export * from './ShareLink';
 export * from './Slider';
 export * from './Spacer';
 export * from './Stepper';
+export * from './SwipeActions';
 export * from './Text';
 export { useNativeState } from '../State/useNativeState';
+export { withAnimation, type WithAnimationCompletionCriteria } from './withAnimation';
 export * from './SyncToggle';
 export * from './TabView';
 export * from './Toggle';

package/src/swift-ui/modifiers/index.ts

@@ -20,6 +20,7 @@ import { environment } from './environment';
 import { gaugeStyle } from './gaugeStyle';
 import { progressViewStyle } from './progressViewStyle';
 import { id, scrollPosition } from './scrollPosition';
+import { symbolEffect } from './symbolEffect';
 import type { Color } from './types';
 import { widgetAccentedRenderingMode, widgetURL } from './widgets';
 
@@ -1376,6 +1377,7 @@ export type BuiltInModifier =
   | ReturnType<typeof listStyle>
   | ReturnType<typeof contentTransition>
   | ReturnType<typeof resizable>
+  | ReturnType<typeof symbolEffect>
   | ReturnType<typeof widgetAccentedRenderingMode>
   | ReturnType<typeof widgetURL>
   | ReturnType<typeof containerBackground>;
@@ -1426,6 +1428,7 @@ export * from './gaugeStyle';
 export * from './presentationModifiers';
 export * from './environment';
 export * from './scrollPosition';
+export * from './symbolEffect';
 export * from './widgets';
 export type {
   TimingAnimationParams,

package/src/swift-ui/modifiers/symbolEffect.ts

@@ -0,0 +1,181 @@
+import { createModifier } from './createModifier';
+import { type ObservableState } from '../../State/useNativeState';
+import { getStateId } from '../../State/utils';
+
+// https://developer.apple.com/documentation/symbols/appearsymboleffect
+type AppearSymbolEffect = {
+  effect: 'appear';
+  scale?: 'down' | 'up';
+  scope?: 'byLayer' | 'wholeSymbol';
+};
+
+// https://developer.apple.com/documentation/symbols/bouncesymboleffect
+type BounceSymbolEffect = {
+  effect: 'bounce';
+  direction?: 'down' | 'up';
+  scope?: 'byLayer' | 'wholeSymbol';
+};
+
+// https://developer.apple.com/documentation/symbols/breathesymboleffect
+type BreatheSymbolEffect = {
+  effect: 'breathe';
+  style?: 'plain' | 'pulse';
+  scope?: 'byLayer' | 'wholeSymbol';
+};
+
+// https://developer.apple.com/documentation/symbols/disappearsymboleffect
+type DisappearSymbolEffect = {
+  effect: 'disappear';
+  scale?: 'down' | 'up';
+  scope?: 'byLayer' | 'wholeSymbol';
+};
+
+// https://developer.apple.com/documentation/symbols/drawoffsymboleffect
+type DrawOffSymbolEffect = {
+  effect: 'drawOff';
+  playbackStyle?: 'nonReversed' | 'reversed';
+  scope?: 'byLayer' | 'individually' | 'wholeSymbol';
+};
+
+// https://developer.apple.com/documentation/symbols/drawonsymboleffect
+type DrawOnSymbolEffect = {
+  effect: 'drawOn';
+  scope?: 'byLayer' | 'individually' | 'wholeSymbol';
+};
+
+// https://developer.apple.com/documentation/symbols/pulsesymboleffect
+type PulseSymbolEffect = {
+  effect: 'pulse';
+  scope?: 'byLayer' | 'wholeSymbol';
+};
+
+// https://developer.apple.com/documentation/symbols/rotatesymboleffect
+type RotateSymbolEffect = {
+  effect: 'rotate';
+  direction?: 'clockwise' | 'counterClockwise';
+  scope?: 'byLayer' | 'wholeSymbol';
+};
+
+// https://developer.apple.com/documentation/symbols/scalesymboleffect
+type ScaleSymbolEffect = {
+  effect: 'scale';
+  scale?: 'down' | 'up';
+  scope?: 'byLayer' | 'wholeSymbol';
+};
+
+// https://developer.apple.com/documentation/symbols/variablecolorsymboleffect
+type VariableColorSymbolEffect = {
+  effect: 'variableColor';
+  fillStyle?: 'cumulative' | 'iterative';
+  playbackStyle?: 'nonReversing' | 'reversing';
+  inactiveLayers?: 'dim' | 'hide';
+};
+
+// https://developer.apple.com/documentation/symbols/wigglesymboleffect
+type WiggleSymbolEffect = {
+  effect: 'wiggle';
+  direction?:
+    | 'backward'
+    | 'clockwise'
+    | 'counterClockwise'
+    | 'down'
+    | 'forward'
+    | 'left'
+    | 'right'
+    | 'up';
+  // Custom wiggle angle in degrees. Takes precedence over `direction` when set.
+  customAngle?: number;
+  scope?: 'byLayer' | 'wholeSymbol';
+};
+
+export type SymbolEffect =
+  | AppearSymbolEffect
+  | BounceSymbolEffect
+  | BreatheSymbolEffect
+  | DisappearSymbolEffect
+  | DrawOffSymbolEffect
+  | DrawOnSymbolEffect
+  | PulseSymbolEffect
+  | RotateSymbolEffect
+  | ScaleSymbolEffect
+  | VariableColorSymbolEffect
+  | WiggleSymbolEffect;
+
+/**
+ * Animation options for a symbol effect.
+ *
+ * @see Official [Apple documentation](https://developer.apple.com/documentation/symbols/symboleffectoptions).
+ */
+export type SymbolEffectOptions = {
+  /**
+   * How the effect repeats. Omit for the effect's natural cadence.
+   * - `'nonRepeating'` — play exactly once.
+   * - `'continuous'` — smooth, indefinite repetition (iOS 18+).
+   * - `{ count?, delay? }` — periodic repetition with optional count and delay in seconds (iOS 18+).
+   */
+  repeat?: 'continuous' | 'nonRepeating' | { count?: number; delay?: number };
+  /** Animation speed multiplier (1.0 = default). */
+  speed?: number;
+};
+
+/** Equatable primitive accepted as a discrete effect trigger. */
+export type DiscreteSymbolEffectValue = number | string | boolean;
+
+/**
+ * Applies an SF Symbol effect to a view.
+ *
+ * @platform ios 17.0+
+ * @platform tvos 17.0+
+ * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/SwiftUI/View/symbolEffect(_:options:value:)).
+ *
+ * @example
+ * ```tsx
+ * const trigger = useNativeState(0);
+ * <Image
+ *   systemName="bell.fill"
+ *   modifiers={[symbolEffect({ effect: 'bounce', direction: 'up' }, { value: trigger })]}
+ * />
+ * ```
+ */
+export const symbolEffect = (
+  effect: SymbolEffect,
+  args: {
+    options?: SymbolEffectOptions;
+    /** Indefinite effects: runs while `state.value === true`. Default active when omitted. */
+    isActive?: ObservableState<boolean>;
+    /** Discrete effects: the effect fires once each time this value changes. */
+    value?: ObservableState<DiscreteSymbolEffectValue>;
+  } = {}
+) => {
+  const { options, isActive, value } = args;
+  return createModifier('symbolEffect', {
+    effect,
+    options: flattenOptions(options),
+    isActive: isActive ? getStateId(isActive) : undefined,
+    value: value ? getStateId(value) : undefined,
+  });
+};
+
+function flattenOptions(options?: SymbolEffectOptions) {
+  if (!options) return undefined;
+  const { speed } = options;
+  const repeatField = options.repeat;
+  if (repeatField === undefined) {
+    return { speed };
+  }
+  if (repeatField === 'nonRepeating') {
+    return { repeatKind: 'nonRepeating' as const, speed };
+  }
+  if (repeatField === 'continuous') {
+    return { repeatKind: 'continuous' as const, speed };
+  }
+  return {
+    repeatKind: 'periodic' as const,
+    repeatCount: repeatField.count,
+    repeatDelay: repeatField.delay,
+    speed,
+  };
+}
+
+// exported for docs api data
+export { type ObservableState };

package/src/swift-ui/withAnimation.ts

@@ -0,0 +1,71 @@
+import { requireNativeModule } from 'expo';
+
+import { worklets } from '../State/optionalWorklets';
+import { VALUE_SYMBOL } from './modifiers/animation/constants';
+import type { AnimationObject, ChainableAnimationType } from './modifiers/animation/types';
+
+const ExpoUI = requireNativeModule('ExpoUI');
+
+/**
+ * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/animationcompletioncriteria).
+ */
+export type WithAnimationCompletionCriteria = 'logicallyComplete' | 'removed';
+
+/**
+ * Mirrors SwiftUI's [`withAnimation(_:_:)`](https://developer.apple.com/documentation/swiftui/withanimation(_:_:)).
+ * The body must be a worklet so the mutations run synchronously on the
+ * UI thread inside the animation transaction.
+ *
+ * Performs `body` inside a SwiftUI animation transaction. Any
+ * `useNativeState` values mutated by the worklet animate to their new value
+ * using `animation`.
+ *
+ * @param animation Animation to apply, built with the `Animation` factory
+ * from `@expo/ui/swift-ui/modifiers`. Pass `null` to run `body` without an
+ * animation.
+ * @param body Worklet that mutates one or more `useNativeState` values.
+ * @param completion Optional worklet invoked on the main thread when the
+ * animation finishes. Requires iOS 17 / tvOS 17; on earlier versions the
+ * animation still runs but the callback is silently skipped.
+ * @param completionCriteria Controls when `completion` fires. Defaults to
+ * `'logicallyComplete'`.
+ */
+export function withAnimation(
+  animation: ChainableAnimationType | null,
+  body: () => void,
+  completion?: () => void,
+  completionCriteria?: WithAnimationCompletionCriteria
+): void {
+  if (!worklets) {
+    throw new Error(
+      "withAnimation needs the 'react-native-worklets' package, which couldn't be loaded. " +
+        'Install react-native-worklets and rebuild the native app, then call withAnimation again.'
+    );
+  }
+
+  if (!worklets.isWorkletFunction(body)) {
+    throw new Error(
+      'withAnimation body must be a worklet. Worklets run synchronously on the UI thread ' +
+        "so state changes are captured by SwiftUI's animation transaction. " +
+        "Add the 'worklet' directive as the first statement: " +
+        "() => { 'worklet'; state.value = next; }."
+    );
+  }
+
+  let completionCallback: object | null = null;
+  if (completion) {
+    if (!worklets.isWorkletFunction(completion)) {
+      throw new Error(
+        "withAnimation completion must be a worklet. Add the 'worklet' directive as the " +
+          'first statement in your completion callback.'
+      );
+    }
+    completionCallback = new ExpoUI.WorkletCallback(worklets.createSerializable(completion));
+  }
+
+  const animationObject: AnimationObject | null =
+    animation == null ? null : animation[VALUE_SYMBOL]();
+
+  const bodyCallback = new ExpoUI.WorkletCallback(worklets.createSerializable(body));
+  ExpoUI.withAnimation(animationObject, bodyCallback, completionCallback, completionCriteria);
+}

package/src/ts-declarations/react-native-web.d.ts

@@ -7,6 +7,8 @@ declare module 'react-native' {
   ) => React.ReactElement<P>;
 
   type DisplayValue = ReactNative.FlexStyle['display'] | 'inline-flex';
+  type OverflowValue = 'auto' | 'hidden' | 'scroll' | 'visible';
+  type WebDimensionValue = ReactNative.DimensionValue | string;
 
   type WebRole =
     | ReactNative.Role
@@ -95,18 +97,43 @@ declare module 'react-native' {
   }
 
   export interface ViewProps extends WebAccessibilityProps {
+    dir?: string;
     role?: WebRole;
   }
 
   export interface ImageStyle {
     display?: DisplayValue;
+    height?: WebDimensionValue;
+    width?: WebDimensionValue;
+    overflowX?: OverflowValue;
+    overflowY?: OverflowValue;
+    paddingLeft?: WebDimensionValue;
+    paddingRight?: WebDimensionValue;
+    paddingTop?: WebDimensionValue;
+    paddingBottom?: WebDimensionValue;
   }
 
   export interface TextStyle {
     display?: DisplayValue;
+    height?: WebDimensionValue;
+    width?: WebDimensionValue;
+    overflowX?: OverflowValue;
+    overflowY?: OverflowValue;
+    paddingLeft?: WebDimensionValue;
+    paddingRight?: WebDimensionValue;
+    paddingTop?: WebDimensionValue;
+    paddingBottom?: WebDimensionValue;
   }
 
   export interface ViewStyle {
     display?: DisplayValue;
+    height?: WebDimensionValue;
+    width?: WebDimensionValue;
+    overflowX?: OverflowValue;
+    overflowY?: OverflowValue;
+    paddingLeft?: WebDimensionValue;
+    paddingRight?: WebDimensionValue;
+    paddingTop?: WebDimensionValue;
+    paddingBottom?: WebDimensionValue;
   }
 }

package/src/universal/BottomSheet/index.android.tsx

@@ -1,32 +1,56 @@
 import { Column, ModalBottomSheet } from '@expo/ui/jetpack-compose';
 import {
+  fillMaxHeight,
   padding,
   testID as testIDModifier,
   type ModifierConfig,
 } from '@expo/ui/jetpack-compose/modifiers';
 
-import type { BottomSheetProps } from './types';
+import type { BottomSheetProps, SnapPoint } from './types';
+
+// M3 `ModalBottomSheet` only has partial/expanded states.
+// Only allow the partial state when the consumer requested a partial-friendly snap point.
+function shouldSkipPartiallyExpanded(snapPoints: SnapPoint[] | undefined): boolean {
+  if (!snapPoints || snapPoints.length === 0) return false;
+  return !snapPoints.some(
+    (sp) =>
+      sp === 'half' ||
+      (typeof sp === 'object' && 'fraction' in sp && sp.fraction < 1) ||
+      (typeof sp === 'object' && 'height' in sp)
+  );
+}
+
+// M3 sizes content to intrinsic height.
+// Apply `fillMaxHeight` so `'full'` actually fills the viewport instead of stopping at content height.
+function shouldFillMaxHeight(snapPoints: SnapPoint[] | undefined): boolean {
+  if (!snapPoints || snapPoints.length === 0) return false;
+  return snapPoints.some(
+    (sp) => sp === 'full' || (typeof sp === 'object' && 'fraction' in sp && sp.fraction >= 1)
+  );
+}
 
 export function BottomSheet({
   children,
   isPresented,
   onDismiss,
   showDragIndicator = true,
+  snapPoints,
   testID,
   modifiers,
 }: BottomSheetProps) {
   if (!isPresented) return null;
 
   const contentModifiers: ModifierConfig[] = [padding(16, showDragIndicator ? 0 : 16, 16, 0)];
+  if (shouldFillMaxHeight(snapPoints)) contentModifiers.push(fillMaxHeight());
   if (testID) contentModifiers.push(testIDModifier(testID));
 
   return (
     <ModalBottomSheet
       onDismissRequest={onDismiss}
       showDragHandle={showDragIndicator}
+      skipPartiallyExpanded={shouldSkipPartiallyExpanded(snapPoints)}
       modifiers={modifiers}>
-      {/* When the drag handle is hidden, add top padding so content doesn't
-          crop against the top edge of the sheet. */}
+      {/* When the drag handle is hidden, add top padding so content doesn't crop against the top edge of the sheet. */}
       <Column modifiers={contentModifiers}>{children}</Column>
     </ModalBottomSheet>
   );