@expo/ui 55.0.0-preview.6 → 55.0.0

package/src/jetpack-compose/modifiers/index.ts

@@ -1,33 +1,33 @@
 import { type ColorValue } from 'react-native';
 
-import { parseJSXShape, ShapeJSXElement } from '../Shape';
+import { createModifier, createModifierWithEventListener } from './createModifier';
+export { type ExpoModifier } from '../../types';
 
-/**
- * Modifier configuration for Jetpack Compose views.
- * This follows the JSON Config pattern (same as iOS SwiftUI modifiers).
- *
- * @example
- * ```tsx
- * import { Button, paddingAll, background } from 'expo-ui';
- *
- * <Button modifiers={[paddingAll(10), background('#FF0000')]} />
- * ```
- */
-export interface ModifierConfig {
-  $type: string;
-  $scope?: string;
-  [key: string]: unknown;
-}
-
-// =============================================================================
-// Padding Modifiers
-// =============================================================================
+export type Alignment =
+  // 2D Alignments
+  | 'topStart'
+  | 'topCenter'
+  | 'topEnd'
+  | 'centerStart'
+  | 'center'
+  | 'centerEnd'
+  | 'bottomStart'
+  | 'bottomCenter'
+  | 'bottomEnd'
+  // 1D Alignments Vertically
+  | 'top'
+  | 'centerVertically'
+  | 'bottom'
+  // 1D Alignments Horizontally
+  | 'start'
+  | 'centerHorizontally'
+  | 'end';
 
 /**
  * Applies equal padding on all sides.
  * @param all - Padding value in dp.
  */
-export const paddingAll = (all: number): ModifierConfig => ({ $type: 'paddingAll', all });
+export const paddingAll = (all: number) => createModifier('paddingAll', { all });
 
 /**
  * Applies padding with individual values for each side.
@@ -36,12 +36,8 @@ export const paddingAll = (all: number): ModifierConfig => ({ $type: 'paddingAll
  * @param end - Right padding in dp (or left in RTL).
  * @param bottom - Bottom padding in dp.
  */
-export const padding = (
-  start: number,
-  top: number,
-  end: number,
-  bottom: number
-): ModifierConfig => ({ $type: 'padding', start, top, end, bottom });
+export const padding = (start: number, top: number, end: number, bottom: number) =>
+  createModifier('padding', { start, top, end, bottom });
 
 // =============================================================================
 // Size Modifiers
@@ -52,38 +48,51 @@ export const padding = (
  * @param width - Width in dp.
  * @param height - Height in dp.
  */
-export const size = (width: number, height: number): ModifierConfig => ({
-  $type: 'size',
-  width,
-  height,
-});
+export const size = (width: number, height: number) => createModifier('size', { width, height });
 
 /**
  * Fills the maximum available size.
  * @param fraction - Fraction of max size (0.0 to 1.0). Default is 1.0.
  */
-export const fillMaxSize = (fraction?: number): ModifierConfig => ({
-  $type: 'fillMaxSize',
-  fraction,
-});
+export const fillMaxSize = (fraction?: number) => createModifier('fillMaxSize', { fraction });
 
 /**
  * Fills the maximum available width.
  * @param fraction - Fraction of max width (0.0 to 1.0). Default is 1.0.
  */
-export const fillMaxWidth = (fraction?: number): ModifierConfig => ({
-  $type: 'fillMaxWidth',
-  fraction,
-});
+export const fillMaxWidth = (fraction?: number) => createModifier('fillMaxWidth', { fraction });
 
 /**
  * Fills the maximum available height.
  * @param fraction - Fraction of max height (0.0 to 1.0). Default is 1.0.
  */
-export const fillMaxHeight = (fraction?: number): ModifierConfig => ({
-  $type: 'fillMaxHeight',
-  fraction,
-});
+export const fillMaxHeight = (fraction?: number) => createModifier('fillMaxHeight', { fraction });
+
+/**
+ * Sets the exact width of the view.
+ * @param value - Width in dp.
+ */
+export const width = (value: number) => createModifier('width', { width: value });
+
+/**
+ * Sets the exact height of the view.
+ * @param value - Height in dp.
+ */
+export const height = (value: number) => createModifier('height', { height: value });
+
+/**
+ * Wraps the width to the content size.
+ * @param alignment - Optional horizontal alignment ('start', 'centerHorizontally', 'end').
+ */
+export const wrapContentWidth = (alignment?: 'start' | 'centerHorizontally' | 'end') =>
+  createModifier('wrapContentWidth', alignment ? { alignment } : {});
+
+/**
+ * Wraps the height to the content size.
+ * @param alignment - Optional vertical alignment ('top', 'centerVertically', 'bottom').
+ */
+export const wrapContentHeight = (alignment?: 'top' | 'centerVertically' | 'bottom') =>
+  createModifier('wrapContentHeight', alignment ? { alignment } : {});
 
 // =============================================================================
 // Position Modifiers
@@ -94,7 +103,7 @@ export const fillMaxHeight = (fraction?: number): ModifierConfig => ({
  * @param x - Horizontal offset in dp.
  * @param y - Vertical offset in dp.
  */
-export const offset = (x: number, y: number): ModifierConfig => ({ $type: 'offset', x, y });
+export const offset = (x: number, y: number) => createModifier('offset', { x, y });
 
 // =============================================================================
 // Appearance Modifiers
@@ -104,36 +113,33 @@ export const offset = (x: number, y: number): ModifierConfig => ({ $type: 'offse
  * Sets the background color.
  * @param color - Color string (hex, e.g., '#FF0000').
  */
-export const background = (color: ColorValue): ModifierConfig => ({ $type: 'background', color });
+export const background = (color: ColorValue) => createModifier('background', { color });
 
 /**
  * Adds a border around the view.
  * @param borderWidth - Border width in dp.
  * @param borderColor - Border color string (hex).
  */
-export const border = (borderWidth: number, borderColor: ColorValue): ModifierConfig => ({
-  $type: 'border',
-  borderWidth,
-  borderColor,
-});
+export const border = (borderWidth: number, borderColor: ColorValue) =>
+  createModifier('border', { borderWidth, borderColor });
 
 /**
  * Adds a shadow/elevation effect.
  * @param elevation - Shadow elevation in dp.
  */
-export const shadow = (elevation: number): ModifierConfig => ({ $type: 'shadow', elevation });
+export const shadow = (elevation: number) => createModifier('shadow', { elevation });
 
 /**
  * Sets the opacity/alpha of the view.
  * @param alpha - Opacity value (0.0 to 1.0).
  */
-export const alpha = (alpha: number): ModifierConfig => ({ $type: 'alpha', alpha });
+export const alpha = (alpha: number) => createModifier('alpha', { alpha });
 
 /**
  * Applies a blur effect.
  * @param radius - Blur radius in dp.
  */
-export const blur = (radius: number): ModifierConfig => ({ $type: 'blur', radius });
+export const blur = (radius: number) => createModifier('blur', { radius });
 
 // =============================================================================
 // Transform Modifiers
@@ -143,13 +149,13 @@ export const blur = (radius: number): ModifierConfig => ({ $type: 'blur', radius
  * Rotates the view.
  * @param degrees - Rotation angle in degrees.
  */
-export const rotate = (degrees: number): ModifierConfig => ({ $type: 'rotate', degrees });
+export const rotate = (degrees: number) => createModifier('rotate', { degrees });
 
 /**
  * Sets the z-index for layering.
  * @param index - Z-index value.
  */
-export const zIndex = (index: number): ModifierConfig => ({ $type: 'zIndex', index });
+export const zIndex = (index: number) => createModifier('zIndex', { index });
 
 // =============================================================================
 // Animation Modifiers
@@ -160,11 +166,8 @@ export const zIndex = (index: number): ModifierConfig => ({ $type: 'zIndex', ind
  * @param dampingRatio - Spring damping ratio. Default is DampingRatioNoBouncy.
  * @param stiffness - Spring stiffness. Default is StiffnessMedium.
  */
-export const animateContentSize = (dampingRatio?: number, stiffness?: number): ModifierConfig => ({
-  $type: 'animateContentSize',
-  dampingRatio,
-  stiffness,
-});
+export const animateContentSize = (dampingRatio?: number, stiffness?: number) =>
+  createModifier('animateContentSize', { dampingRatio, stiffness });
 
 // =============================================================================
 // Scope-dependent Modifiers
@@ -175,20 +178,18 @@ export const animateContentSize = (dampingRatio?: number, stiffness?: number): M
  * Only works when used inside Row or Column.
  * @param weight - Weight value (relative to siblings).
  */
-export const weight = (weight: number): ModifierConfig => ({
-  $type: 'weight',
-  $scope: 'RowScope',
-  weight,
-});
+export const weight = (weight: number) => createModifier('weight', { weight });
+
+/**
+ * Aligns the view within its container.
+ */
+export const align = (alignment: Alignment) => createModifier('align', { alignment });
 
 /**
  * Makes the view match the parent Box size.
  * Only works when used inside Box.
  */
-export const matchParentSize = (): ModifierConfig => ({
-  $type: 'matchParentSize',
-  $scope: 'BoxScope',
-});
+export const matchParentSize = () => createModifier('matchParentSize');
 
 // =============================================================================
 // Interaction Modifiers
@@ -196,12 +197,18 @@ export const matchParentSize = (): ModifierConfig => ({
 
 /**
  * Makes the view clickable.
- * @param callback - Function to call when clicked.
+ * @param handler - Function to call when clicked.
+ */
+export const clickable = (handler: () => void) =>
+  createModifierWithEventListener('clickable', handler);
+
+/**
+ * Makes the view selectable, like a radio button row.
+ * @param selected - Whether the item is currently selected.
+ * @param handler - Function to call when the item is clicked.
  */
-export const clickable = (callback: () => void): ModifierConfig => ({
-  $type: 'clickable',
-  eventListener: callback,
-});
+export const selectable = (selected: boolean, handler: () => void) =>
+  createModifierWithEventListener('selectable', handler, { selected });
 
 // =============================================================================
 // Utility Modifiers
@@ -211,13 +218,127 @@ export const clickable = (callback: () => void): ModifierConfig => ({
  * Sets the test ID for testing frameworks.
  * @param tag - Test ID string.
  */
-export const testID = (tag: string): ModifierConfig => ({ $type: 'testID', testID: tag });
+export const testID = (tag: string) => createModifier('testID', { testID: tag });
+
+// =============================================================================
+// Clip Modifier & Shapes
+// =============================================================================
+
+type MaterialShapeName =
+  | 'cookie4Sided'
+  | 'cookie6Sided'
+  | 'cookie7Sided'
+  | 'cookie9Sided'
+  | 'cookie12Sided'
+  | 'clover4Leaf'
+  | 'clover8Leaf'
+  | 'softBurst'
+  | 'boom'
+  | 'oval'
+  | 'pill'
+  | 'triangle'
+  | 'diamond'
+  | 'pentagon'
+  | 'sunny'
+  | 'verySunny'
+  | 'fan'
+  | 'pixelCircle'
+  | 'pixelTriangle'
+  | 'ghostish'
+  | 'bun'
+  | 'heart'
+  | 'arch'
+  | 'slanted'
+  | 'puffy'
+  | 'puffyDiamond';
+
+type CornerRadii = {
+  topStart?: number;
+  topEnd?: number;
+  bottomStart?: number;
+  bottomEnd?: number;
+};
+
+/**
+ * Built-in Jetpack Compose shape for the clip modifier.
+ */
+export type BuiltinShape =
+  | { type: 'rectangle' }
+  | { type: 'circle' }
+  | {
+      type: 'roundedCorner';
+      radius?: number;
+      topStart?: number;
+      topEnd?: number;
+      bottomStart?: number;
+      bottomEnd?: number;
+    }
+  | {
+      type: 'cutCorner';
+      radius?: number;
+      topStart?: number;
+      topEnd?: number;
+      bottomStart?: number;
+      bottomEnd?: number;
+    }
+  | { type: 'material'; name: MaterialShapeName };
+
+const material = (name: MaterialShapeName): BuiltinShape => ({ type: 'material', name });
+
+/**
+ * Predefined shapes for use with the `clip` modifier.
+ *
+ * @example
+ * ```tsx
+ * clip(Shapes.Circle)
+ * clip(Shapes.RoundedCorner(16))
+ * clip(Shapes.RoundedCorner({ topStart: 8, bottomEnd: 16 }))
+ * clip(Shapes.Material.Heart)
+ * ```
+ */
+export const Shapes = {
+  Rectangle: { type: 'rectangle' } as BuiltinShape,
+  Circle: { type: 'circle' } as BuiltinShape,
+  RoundedCorner: (params: number | CornerRadii): BuiltinShape =>
+    typeof params === 'number'
+      ? { type: 'roundedCorner', radius: params }
+      : { type: 'roundedCorner', ...params },
+  CutCorner: (params: number | CornerRadii): BuiltinShape =>
+    typeof params === 'number'
+      ? { type: 'cutCorner', radius: params }
+      : { type: 'cutCorner', ...params },
+  Material: {
+    Cookie4Sided: material('cookie4Sided'),
+    Cookie6Sided: material('cookie6Sided'),
+    Cookie7Sided: material('cookie7Sided'),
+    Cookie9Sided: material('cookie9Sided'),
+    Cookie12Sided: material('cookie12Sided'),
+    Clover4Leaf: material('clover4Leaf'),
+    Clover8Leaf: material('clover8Leaf'),
+    SoftBurst: material('softBurst'),
+    Boom: material('boom'),
+    Oval: material('oval'),
+    Pill: material('pill'),
+    Triangle: material('triangle'),
+    Diamond: material('diamond'),
+    Pentagon: material('pentagon'),
+    Sunny: material('sunny'),
+    VerySunny: material('verySunny'),
+    Fan: material('fan'),
+    PixelCircle: material('pixelCircle'),
+    PixelTriangle: material('pixelTriangle'),
+    Ghostish: material('ghostish'),
+    Bun: material('bun'),
+    Heart: material('heart'),
+    Arch: material('arch'),
+    Slanted: material('slanted'),
+    Puffy: material('puffy'),
+    PuffyDiamond: material('puffyDiamond'),
+  },
+};
 
 /**
- * Clips the view to a shape.
- * @param shape - Shape JSX element to clip to.
+ * Clips the view to a built-in Jetpack Compose shape.
+ * @param shape - A shape from `Shapes`, e.g. `Shapes.Circle` or `Shapes.Material.Heart`.
  */
-export const clip = (shape: ShapeJSXElement): ModifierConfig => ({
-  $type: 'clip',
-  shape: parseJSXShape(shape),
-});
+export const clip = (shape: BuiltinShape) => createModifier('clip', { shape });

package/src/jetpack-compose/modifiers/utils.ts

@@ -0,0 +1,30 @@
+import { type ModifierConfig } from './createModifier';
+
+type GlobalEventPayload = [eventName: string, params: Record<string, any>];
+type GlobalEvent = {
+  onGlobalEvent: (event: { nativeEvent: { payload: GlobalEventPayload } }) => void;
+};
+
+/**
+ * Create an event listener for a view modifier.
+ */
+export function createViewModifierEventListener(modifiers: ModifierConfig[]): GlobalEvent {
+  const eventListeners: Record<string, (args: any) => void> = {};
+  for (const modifier of modifiers) {
+    if (modifier.eventListener) {
+      eventListeners[modifier.$type] = modifier.eventListener;
+    }
+  }
+
+  const onGlobalEvent: GlobalEvent['onGlobalEvent'] = ({ nativeEvent }) => {
+    const [eventName, params] = nativeEvent.payload;
+    const listener = eventListeners[eventName];
+    if (listener) {
+      listener(params);
+    }
+  };
+
+  return {
+    onGlobalEvent,
+  };
+}

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

@@ -0,0 +1,98 @@
+import { requireNativeView } from 'expo';
+import { NativeSyntheticEvent } from 'react-native';
+
+import { createViewModifierEventListener } from '../modifiers/utils';
+import { type CommonViewModifierProps } from '../types';
+
+/**
+ * Props of the `ConfirmationDialog` component.
+ */
+export type ConfirmationDialogProps = {
+  /**
+   * The contents of the confirmation dialog.
+   * Should include `ConfirmationDialog.Trigger`, `ConfirmationDialog.Actions`, and optionally `ConfirmationDialog.Message`.
+   */
+  children: React.ReactNode;
+  /**
+   * The title of the confirmation dialog.
+   */
+  title: string;
+  /**
+   * Whether the confirmation dialog is presented.
+   */
+  isPresented?: boolean;
+  /**
+   * A callback that is called when the `isPresented` state changes.
+   */
+  onIsPresentedChange?: (isPresented: boolean) => void;
+  /**
+   * The visibility of the dialog title.
+   * @default 'automatic'
+   */
+  titleVisibility?: 'automatic' | 'visible' | 'hidden';
+} & CommonViewModifierProps;
+
+type NativeConfirmationDialogProps = Omit<ConfirmationDialogProps, 'onIsPresentedChange'> & {
+  onIsPresentedChange?: (event: NativeSyntheticEvent<{ isPresented: boolean }>) => void;
+};
+
+const ConfirmationDialogNativeView: React.ComponentType<NativeConfirmationDialogProps> =
+  requireNativeView('ExpoUI', 'ConfirmationDialogView');
+
+const ConfirmationDialogNativeTrigger: React.ComponentType<{ children: React.ReactNode }> =
+  requireNativeView('ExpoUI', 'ConfirmationDialogTrigger');
+
+const ConfirmationDialogNativeActions: React.ComponentType<{ children: React.ReactNode }> =
+  requireNativeView('ExpoUI', 'ConfirmationDialogActions');
+
+const ConfirmationDialogNativeMessage: React.ComponentType<{ children: React.ReactNode }> =
+  requireNativeView('ExpoUI', 'ConfirmationDialogMessage');
+
+/**
+ * The component visible all the time that triggers the confirmation dialog presentation.
+ */
+function Trigger(props: { children: React.ReactNode }) {
+  return <ConfirmationDialogNativeTrigger {...props} />;
+}
+
+/**
+ * The action buttons displayed in the confirmation dialog. Use `Button` components from `@expo/ui/swift-ui` as children.
+ */
+function Actions(props: { children: React.ReactNode }) {
+  return <ConfirmationDialogNativeActions {...props} />;
+}
+
+/**
+ * An optional message displayed below the title in the confirmation dialog.
+ */
+function Message(props: { children: React.ReactNode }) {
+  return <ConfirmationDialogNativeMessage {...props} />;
+}
+
+/**
+ * `ConfirmationDialog` presents a confirmation dialog with a title, optional message, and action buttons.
+ *
+ * @see https://developer.apple.com/documentation/swiftui/view/confirmationdialog(_:ispresented:titlevisibility:actions:message:)
+ */
+function ConfirmationDialog(props: ConfirmationDialogProps) {
+  const { onIsPresentedChange, modifiers, children, ...restProps } = props;
+
+  const handleIsPresentedChange = (event: NativeSyntheticEvent<{ isPresented: boolean }>) => {
+    onIsPresentedChange?.(event.nativeEvent.isPresented);
+  };
+
+  return (
+    <ConfirmationDialogNativeView
+      {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}
+      {...restProps}
+      onIsPresentedChange={handleIsPresentedChange}>
+      {children}
+    </ConfirmationDialogNativeView>
+  );
+}
+
+ConfirmationDialog.Trigger = Trigger;
+ConfirmationDialog.Actions = Actions;
+ConfirmationDialog.Message = Message;
+
+export { ConfirmationDialog };

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

@@ -0,0 +1,34 @@
+import { requireNativeView } from 'expo';
+
+import { createViewModifierEventListener } from '../modifiers/utils';
+import { type CommonViewModifierProps } from '../types';
+
+export type ScrollViewProps = {
+  children: React.ReactNode;
+  /**
+   * The scrollable axes.
+   * @default 'vertical'
+   */
+  axes?: 'vertical' | 'horizontal' | 'both';
+  /**
+   * Whether to show scroll indicators.
+   * @default true
+   */
+  showsIndicators?: boolean;
+} & CommonViewModifierProps;
+
+const ScrollViewNativeView: React.ComponentType<ScrollViewProps> = requireNativeView(
+  'ExpoUI',
+  'ScrollViewComponent'
+);
+
+export function ScrollView(props: ScrollViewProps) {
+  const { modifiers, ...restProps } = props;
+  return (
+    <ScrollViewNativeView
+      modifiers={modifiers}
+      {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}
+      {...restProps}
+    />
+  );
+}

package/src/swift-ui/index.tsx

@@ -3,6 +3,7 @@ export * from './Button';
 export * from './Chart';
 export * from './ColorPicker';
 export * from './ContentUnavailableView';
+export * from './ConfirmationDialog';
 export * from './ContextMenu';
 export * from './DatePicker';
 export * from './Divider';
@@ -32,6 +33,7 @@ export * from './TextField';
 export * from './SecureField';
 export * from './Namespace';
 export * from './GlassEffectContainer';
+export * from './ScrollView';
 export * from './Shapes';
 export * from './Popover';
 export * from './Grid';

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

@@ -225,10 +225,11 @@ export const border = (params: { color: Color; width?: number }) =>
 
 /**
  * Applies scaling transformation.
- * @param scale - Scale factor (1.0 = normal size).
+ * @param scale - Uniform scale factor (1.0 = normal size), or an object with separate `x` and `y` scale factors.
  * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/view/scaleeffect(_:anchor:)).
  */
-export const scaleEffect = (scale: number) => createModifier('scaleEffect', { scale });
+export const scaleEffect = (scale: number | { x: number; y: number }) =>
+  createModifier('scaleEffect', typeof scale === 'number' ? { x: scale, y: scale } : scale);
 
 /**
  * Applies rotation transformation.
@@ -364,7 +365,14 @@ export const foregroundStyle = (
   if (typeof style === 'string') {
     return createModifier('foregroundStyle', { styleType: 'color', color: style });
   }
-  return createModifier('foregroundStyle', { styleType: style.type, ...style });
+  if (style.type === 'hierarchical') {
+    return createModifier('foregroundStyle', {
+      styleType: 'hierarchical',
+      hierarchicalStyle: style.style,
+    });
+  }
+  const { type, ...rest } = style;
+  return createModifier('foregroundStyle', { styleType: type, ...rest });
 };
 
 /**
@@ -381,6 +389,13 @@ export const bold = () => createModifier('bold', {});
  */
 export const italic = () => createModifier('italic', {});
 
+/**
+ * Modifies the fonts of all child views to use fixed-width digits, if possible, while leaving other characters proportionally spaced.
+ * When applied to `Text`, modifies the text view's font to use fixed-width digits, while leaving other characters proportionally spaced.
+ * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/view/monospaceddigit()).
+ */
+export const monospacedDigit = () => createModifier('monospacedDigit', {});
+
 /**
  * Sets the tint color of a view.
  * @param color - The tint color (hex string). For example, `#FF0000`.
@@ -995,6 +1010,7 @@ export type BuiltInModifier =
   | ReturnType<typeof foregroundStyle>
   | ReturnType<typeof bold>
   | ReturnType<typeof italic>
+  | ReturnType<typeof monospacedDigit>
   | ReturnType<typeof tint>
   | ReturnType<typeof hidden>
   | ReturnType<typeof disabled>

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

@@ -0,0 +1,31 @@
+declare module 'react-native/Libraries/Image/AssetSourceResolver' {
+  import { PackagerAsset } from '@react-native/assets/registry';
+
+  export type ResolvedAssetSource = {
+    __packager_asset: boolean;
+    width?: number | null;
+    height?: number | null;
+    uri: string;
+    scale: number;
+  };
+
+  export default class AssetSourceResolver {
+    serverUrl: string | null;
+    jsbundleUrl: string | null;
+    asset: PackagerAsset & { fileHashes?: string[] };
+
+    constructor(serverUrl: string | null, jsbundleUrl: string | null, asset: PackagerAsset);
+
+    isLoadedFromServer(): boolean;
+    isLoadedFromFileSystem(): boolean;
+    defaultAsset(): ResolvedAssetSource;
+    assetServerURL(): ResolvedAssetSource;
+    scaledAssetPath(): ResolvedAssetSource;
+    scaledAssetURLNearBundle(): ResolvedAssetSource;
+    resourceIdentifierWithoutScale(): ResolvedAssetSource;
+    drawableFolderInBundle(): ResolvedAssetSource;
+    fromSource(source: string): ResolvedAssetSource;
+
+    static pickScale(scales: number[], deviceScale: number): number;
+  }
+}