@webority-technologies/mobile 0.0.15 → 0.0.20

package/lib/module/components/DateRangePicker/DateRangePicker.js

@@ -2,9 +2,21 @@
 
 import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { AccessibilityInfo, Animated, Easing, Modal, Pressable, StyleSheet, Text, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useTheme, createAnimatedValue, setNativeValue } from "../../theme/index.js";
 import { triggerHaptic } from "../../utils/index.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PickerTrigger } from "../PickerTrigger/index.js";
+
+/**
+ * DateRangePicker — supports two usage modes:
+ *
+ *   1. Controlled-modal mode (pass `visible` + `onClose`): renders only the
+ *      modal; parent owns open/close state.
+ *   2. Trigger mode (omit `visible`): renders a built-in `PickerTrigger`
+ *      field that opens an internally-managed modal on tap. Confirm fires
+ *      `onChange?.(...)` and closes.
+ */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const DAY_MS = 24 * 60 * 60 * 1000;
 const startOfDay = date => new Date(date.getFullYear(), date.getMonth(), date.getDate());
 const isSameDay = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
@@ -70,6 +82,18 @@ const DateRangePicker = /*#__PURE__*/forwardRef((props, ref) => {
     value,
     onChange,
     onClose,
+    label,
+    placeholder,
+    helperText,
+    error,
+    required,
+    disabled,
+    size,
+    variant,
+    clearable,
+    onClear,
+    formatValue,
+    triggerStyle,
     minDate,
     maxDate,
     disabledDates,
@@ -80,9 +104,17 @@ const DateRangePicker = /*#__PURE__*/forwardRef((props, ref) => {
     cancelLabel = 'Cancel',
     maxRange,
     style,
+    containerStyle,
+    headerLabelStyle,
+    navButtonStyle,
+    footerButtonStyle,
     testID
   } = props;
+  const isControlled = visible !== undefined;
+  const [internalOpen, setInternalOpen] = useState(false);
+  const open = isControlled ? visible : internalOpen;
   const theme = useTheme();
+  const insets = useSafeAreaInsets();
   const styles = useMemo(() => buildStyles(theme), [theme]);
   const today = useMemo(() => startOfDay(new Date()), []);
   const initialAnchor = value.start ? startOfDay(value.start) : today;
@@ -112,16 +144,17 @@ const DateRangePicker = /*#__PURE__*/forwardRef((props, ref) => {
     }
   }, [value.start, value.end]);
 
-  // Modal open / close animation.
+  // Modal open / close animation. Backdrop opacity uses JS driver — see
+  // Modal.tsx for the Fabric reason. Sheet transform stays native.
   useEffect(() => {
-    if (visible) {
-      setNativeValue(backdrop, 0);
+    if (open) {
+      backdrop.setValue(0);
       setNativeValue(sheet, 0);
       Animated.parallel([Animated.timing(backdrop, {
         toValue: 1,
         duration: theme.motion.duration.normal,
         easing: Easing.out(Easing.cubic),
-        useNativeDriver: true
+        useNativeDriver: false
       }), Animated.spring(sheet, {
         toValue: 1,
         damping: theme.motion.spring.gentle.damping,
@@ -130,7 +163,7 @@ const DateRangePicker = /*#__PURE__*/forwardRef((props, ref) => {
         useNativeDriver: true
       })]).start();
     }
-  }, [visible, backdrop, sheet, theme.motion]);
+  }, [open, backdrop, sheet, theme.motion]);
   const disabledIsoSet = useMemo(() => {
     const set = new Set();
     disabledDates?.forEach(d => set.add(toIso(startOfDay(d))));
@@ -148,17 +181,19 @@ const DateRangePicker = /*#__PURE__*/forwardRef((props, ref) => {
   const headerLabel = useMemo(() => formatMonthYear(anchor, locale), [anchor, locale]);
   const weekdays = useMemo(() => weekdayLabels(locale, weekStartsOn), [locale, weekStartsOn]);
   const animateMonthChange = useCallback(delta => {
-    triggerHaptic('impactLight');
+    if (theme.components.dateRangePicker?.haptic) triggerHaptic('impactLight');
     const direction = delta > 0 ? 1 : -1;
-    const distance = 32;
+    const distance = theme.components.dateRangePicker?.monthSlideDistance ?? 32;
+    const outDuration = theme.components.dateRangePicker?.monthSlideOutDuration ?? theme.motion.duration.fast ?? 140;
+    const inDuration = theme.components.dateRangePicker?.monthSlideInDuration ?? theme.motion.duration.fast ?? 160;
     Animated.sequence([Animated.parallel([Animated.timing(monthSlide, {
       toValue: -direction * distance,
-      duration: 140,
+      duration: outDuration,
       easing: Easing.out(Easing.quad),
       useNativeDriver: true
     }), Animated.timing(monthFade, {
       toValue: 0,
-      duration: 140,
+      duration: outDuration,
       useNativeDriver: true
     })]), Animated.timing(monthSlide, {
       toValue: direction * distance,
@@ -166,23 +201,23 @@ const DateRangePicker = /*#__PURE__*/forwardRef((props, ref) => {
       useNativeDriver: true
     }), Animated.parallel([Animated.timing(monthSlide, {
       toValue: 0,
-      duration: 160,
+      duration: inDuration,
       easing: Easing.out(Easing.cubic),
       useNativeDriver: true
     }), Animated.timing(monthFade, {
       toValue: 1,
-      duration: 160,
+      duration: inDuration,
       useNativeDriver: true
     })])]).start();
     const next = addMonths(anchor, delta);
     setAnchor(next);
     AccessibilityInfo.announceForAccessibility(formatMonthYear(next, locale));
-  }, [anchor, locale, monthFade, monthSlide]);
+  }, [anchor, locale, monthFade, monthSlide, theme.components.dateRangePicker, theme.motion.duration.fast]);
   const goPrev = useCallback(() => animateMonthChange(-1), [animateMonthChange]);
   const goNext = useCallback(() => animateMonthChange(1), [animateMonthChange]);
   const pressDay = useCallback(cell => {
     if (isDisabled(cell.date)) return;
-    triggerHaptic('selection');
+    if (theme.components.dateRangePicker?.haptic) triggerHaptic('selection');
     const target = cell.date;
 
     // First tap: pick start. Or, when there's already a complete range, restart.
@@ -201,7 +236,7 @@ const DateRangePicker = /*#__PURE__*/forwardRef((props, ref) => {
       } else {
         if (maxRange && daysBetween(pendingStart, target) + 1 > maxRange) {
           // Reject ranges longer than maxRange — restart from the new tap.
-          triggerHaptic('notificationWarning');
+          if (theme.components.dateRangePicker?.haptic) triggerHaptic('notificationWarning');
           setPendingStart(target);
           setPendingEnd(null);
           return;
@@ -212,35 +247,42 @@ const DateRangePicker = /*#__PURE__*/forwardRef((props, ref) => {
     if (!cell.inMonth) {
       setAnchor(new Date(cell.date.getFullYear(), cell.date.getMonth(), 1));
     }
-  }, [isDisabled, pendingStart, pendingEnd, maxRange]);
+  }, [isDisabled, pendingStart, pendingEnd, maxRange, theme.components.dateRangePicker]);
+  const handleCloseModal = useCallback(() => {
+    if (isControlled) {
+      onClose?.();
+    } else {
+      setInternalOpen(false);
+    }
+  }, [isControlled, onClose]);
   const handleClose = useCallback(() => {
     Animated.parallel([Animated.timing(backdrop, {
       toValue: 0,
       duration: theme.motion.duration.fast,
       easing: Easing.in(Easing.cubic),
-      useNativeDriver: true
+      useNativeDriver: false
     }), Animated.timing(sheet, {
       toValue: 0,
       duration: theme.motion.duration.fast,
       easing: Easing.in(Easing.cubic),
       useNativeDriver: true
     })]).start(() => {
-      onClose();
+      handleCloseModal();
     });
-  }, [backdrop, onClose, sheet, theme.motion.duration.fast]);
+  }, [backdrop, handleCloseModal, sheet, theme.motion.duration.fast]);
   const handleCancel = useCallback(() => {
-    triggerHaptic('selection');
+    if (theme.components.dateRangePicker?.haptic) triggerHaptic('selection');
     handleClose();
-  }, [handleClose]);
+  }, [handleClose, theme.components.dateRangePicker]);
   const handleConfirm = useCallback(() => {
     if (!pendingStart || !pendingEnd) return;
-    triggerHaptic('notificationSuccess');
-    onChange({
+    if (theme.components.dateRangePicker?.haptic) triggerHaptic('notificationSuccess');
+    onChange?.({
       start: pendingStart,
       end: pendingEnd
     });
     handleClose();
-  }, [handleClose, onChange, pendingStart, pendingEnd]);
+  }, [handleClose, onChange, pendingStart, pendingEnd, theme.components.dateRangePicker]);
   const sheetTranslate = sheet.interpolate({
     inputRange: [0, 1],
     outputRange: [320, 0]
@@ -261,7 +303,7 @@ const DateRangePicker = /*#__PURE__*/forwardRef((props, ref) => {
   }, [pendingStart, pendingEnd]);
   const confirmDisabled = !pendingStart || !pendingEnd;
   const calendar = /*#__PURE__*/_jsxs(View, {
-    style: [styles.card, style],
+    style: [styles.card, style, containerStyle],
     ref: ref,
     accessible: false,
     testID: testID,
@@ -282,7 +324,7 @@ const DateRangePicker = /*#__PURE__*/forwardRef((props, ref) => {
         onPress: goPrev,
         style: ({
           pressed
-        }) => [styles.navBtn, pressed && styles.navBtnPressed],
+        }) => [styles.navBtn, pressed && styles.navBtnPressed, navButtonStyle],
         accessibilityRole: "button",
         accessibilityLabel: "Previous month",
         hitSlop: 8,
@@ -296,7 +338,7 @@ const DateRangePicker = /*#__PURE__*/forwardRef((props, ref) => {
           transform: [{
             translateX: monthSlide
           }]
-        }],
+        }, headerLabelStyle],
         children: /*#__PURE__*/_jsx(Text, {
           style: styles.headerLabel,
           accessibilityLiveRegion: "polite",
@@ -306,7 +348,7 @@ const DateRangePicker = /*#__PURE__*/forwardRef((props, ref) => {
         onPress: goNext,
         style: ({
           pressed
-        }) => [styles.navBtn, pressed && styles.navBtnPressed],
+        }) => [styles.navBtn, pressed && styles.navBtnPressed, navButtonStyle],
         accessibilityRole: "button",
         accessibilityLabel: "Next month",
         hitSlop: 8,
@@ -397,7 +439,7 @@ const DateRangePicker = /*#__PURE__*/forwardRef((props, ref) => {
         onPress: handleCancel,
         style: ({
           pressed
-        }) => [styles.footerBtn, styles.footerCancel, pressed && styles.footerBtnPressed],
+        }) => [styles.footerBtn, styles.footerCancel, pressed && styles.footerBtnPressed, footerButtonStyle],
         accessibilityRole: "button",
         accessibilityLabel: cancelLabel,
         children: /*#__PURE__*/_jsx(Text, {
@@ -416,7 +458,7 @@ const DateRangePicker = /*#__PURE__*/forwardRef((props, ref) => {
           opacity: confirmDisabled ? 0.5 : 1
         }, pressed && {
           backgroundColor: theme.colors.primaryHover
-        }],
+        }, footerButtonStyle],
         accessibilityRole: "button",
         accessibilityLabel: confirmLabel,
         accessibilityState: {
@@ -431,32 +473,64 @@ const DateRangePicker = /*#__PURE__*/forwardRef((props, ref) => {
       })]
     })]
   });
-  return /*#__PURE__*/_jsxs(Modal, {
-    visible: visible,
-    transparent: true,
-    statusBarTranslucent: true,
-    animationType: "none",
-    onRequestClose: handleClose,
-    children: [/*#__PURE__*/_jsx(Animated.View, {
-      style: [styles.backdrop, {
-        opacity: backdrop,
-        backgroundColor: theme.colors.background.overlay
-      }],
-      children: /*#__PURE__*/_jsx(Pressable, {
-        style: StyleSheet.absoluteFill,
-        onPress: handleClose,
-        accessibilityLabel: "Dismiss"
+  const triggerValueText = useMemo(() => {
+    if (!value.start || !value.end) return '';
+    const range = {
+      start: value.start,
+      end: value.end
+    };
+    if (formatValue) return formatValue(range);
+    return `${range.start.toLocaleDateString()} – ${range.end.toLocaleDateString()}`;
+  }, [value.start, value.end, formatValue]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [!isControlled ? /*#__PURE__*/_jsx(PickerTrigger, {
+      label: label,
+      placeholder: placeholder,
+      helperText: helperText,
+      error: error,
+      required: required,
+      disabled: disabled,
+      size: size,
+      variant: variant,
+      clearable: clearable,
+      onClear: onClear,
+      value: triggerValueText,
+      onPress: () => setInternalOpen(true),
+      triggerStyle: triggerStyle
+    }) : null, /*#__PURE__*/_jsx(Modal, {
+      visible: open,
+      transparent: true,
+      statusBarTranslucent: true
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore — Android-only RN 0.71+; iOS ignores it.
+      ,
+      navigationBarTranslucent: true,
+      animationType: "none",
+      onRequestClose: handleClose,
+      children: /*#__PURE__*/_jsxs(View
+      // Backdrop wraps the sheet — see Modal.tsx for the Fabric reason.
+      , {
+        collapsable: false,
+        style: [styles.backdrop, {
+          backgroundColor: theme.colors.background.overlay
+        }],
+        children: [/*#__PURE__*/_jsx(Pressable, {
+          style: StyleSheet.absoluteFill,
+          onPress: handleClose,
+          accessibilityLabel: "Dismiss"
+        }), /*#__PURE__*/_jsx(Animated.View, {
+          style: [styles.sheetWrap, {
+            paddingBottom: insets.bottom + theme.spacing.lg,
+            opacity: sheet,
+            transform: [{
+              translateY: sheetTranslate
+            }]
+          }],
+          accessibilityViewIsModal: true,
+          accessibilityRole: "none",
+          children: calendar
+        })]
       })
-    }), /*#__PURE__*/_jsx(Animated.View, {
-      style: [styles.sheetWrap, {
-        opacity: sheet,
-        transform: [{
-          translateY: sheetTranslate
-        }]
-      }],
-      accessibilityViewIsModal: true,
-      accessibilityRole: "none",
-      children: calendar
     })]
   });
 });
@@ -505,8 +579,8 @@ const buildStyles = theme => {
       marginBottom: theme.spacing.md
     },
     navBtn: {
-      width: 36,
-      height: 36,
+      width: theme.components.dateRangePicker?.navButtonSize ?? 36,
+      height: theme.components.dateRangePicker?.navButtonSize ?? 36,
       borderRadius: theme.radius.full,
       alignItems: 'center',
       justifyContent: 'center',
@@ -516,8 +590,8 @@ const buildStyles = theme => {
       backgroundColor: theme.colors.surface.pressed
     },
     navText: {
-      fontSize: 22,
-      lineHeight: 24,
+      fontSize: theme.components.dateRangePicker?.navTextFontSize ?? 22,
+      lineHeight: theme.components.dateRangePicker?.navTextLineHeight ?? 24,
       color: theme.colors.text.primary,
       fontWeight: theme.typography.fontWeight.semibold
     },
@@ -599,7 +673,7 @@ const buildStyles = theme => {
       paddingHorizontal: theme.spacing.lg,
       paddingVertical: theme.spacing.sm,
       borderRadius: theme.radius.md,
-      minHeight: 40,
+      minHeight: theme.components.dateRangePicker?.footerButtonMinHeight ?? 40,
       alignItems: 'center',
       justifyContent: 'center'
     },

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

@@ -19,6 +19,12 @@ const Dialog = props => {
     accessibilityLabel,
     contentStyle,
     containerStyle,
+    titleStyle,
+    messageStyle,
+    iconWrapperStyle,
+    actionsRowStyle,
+    actionButtonStyle,
+    actionTextStyle,
     testID
   } = props;
   const theme = useTheme();
@@ -30,12 +36,12 @@ const Dialog = props => {
   const actionButtonMinHeight = dialogTokens?.actionButtonMinHeight ?? 44;
   const handleAction = useCallback(action => {
     if (action.loading) return;
-    triggerHaptic('selection');
+    if (dialogTokens?.actionHaptic) triggerHaptic('selection');
     action.onPress();
     if (dismissOnAction) {
       onClose();
     }
-  }, [dismissOnAction, onClose]);
+  }, [dismissOnAction, onClose, dialogTokens?.actionHaptic]);
   return /*#__PURE__*/_jsx(Modal, {
     visible: visible,
     onRequestClose: onClose,
@@ -44,7 +50,7 @@ const Dialog = props => {
     contentStyle: contentStyle,
     testID: testID,
     children: /*#__PURE__*/_jsxs(View, {
-      accessibilityRole: 'alertdialog',
+      accessibilityRole: "alert",
       accessibilityLabel: accessibilityLabel ?? title,
       style: [styles.container, containerStyle],
       children: [icon ? /*#__PURE__*/_jsx(View, {
@@ -54,7 +60,7 @@ const Dialog = props => {
           borderRadius: iconWrapperBorderRadius,
           backgroundColor: variantTint.muted,
           marginBottom: theme.spacing.md
-        }],
+        }, iconWrapperStyle],
         children: icon
       }) : null, title ? /*#__PURE__*/_jsx(Text, {
         style: [styles.title, {
@@ -62,7 +68,7 @@ const Dialog = props => {
           fontSize: theme.typography.fontSize.xl,
           ...fontFor(theme, 'semibold'),
           marginBottom: message ? theme.spacing.sm : theme.spacing.md
-        }],
+        }, titleStyle],
         accessibilityRole: "header",
         children: title
       }) : null, typeof message === 'string' ? /*#__PURE__*/_jsx(Text, {
@@ -71,7 +77,7 @@ const Dialog = props => {
           fontSize: theme.typography.fontSize.base,
           lineHeight: theme.typography.fontSize.base * theme.typography.lineHeight.normal,
           marginBottom: actions && actions.length > 0 ? theme.spacing.lg : 0
-        }],
+        }, messageStyle],
         children: message
       }) : message ? /*#__PURE__*/_jsx(View, {
         style: {
@@ -79,7 +85,7 @@ const Dialog = props => {
         },
         children: message
       }) : null, actions && actions.length > 0 ? /*#__PURE__*/_jsx(View, {
-        style: styles.actionsRow,
+        style: [styles.actionsRow, actionsRowStyle],
         children: actions.map((action, index) => {
           const tone = action.tone ?? 'primary';
           const buttonStyle = actionStyleFor(theme, tone, variant);
@@ -105,17 +111,17 @@ const Dialog = props => {
               paddingHorizontal: theme.spacing.lg,
               marginRight: isLast ? 0 : theme.spacing.sm,
               opacity: action.loading ? 0.7 : pressed ? 0.85 : 1
-            }],
+            }, actionButtonStyle],
             children: action.loading ? /*#__PURE__*/_jsx(ActivityIndicator, {
               size: "small",
               color: buttonStyle.textColor
             }) : /*#__PURE__*/_jsx(Text, {
-              style: {
+              style: [{
                 color: buttonStyle.textColor,
                 fontSize: theme.typography.fontSize.base,
                 ...fontFor(theme, 'semibold'),
                 textAlign: 'center'
-              },
+              }, actionTextStyle],
               numberOfLines: 1,
               children: action.label
             })

package/lib/module/components/Drawer/Drawer.js

@@ -28,8 +28,8 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useTheme } from "../../theme/index.js";
 import { triggerHaptic } from "../../utils/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const CLOSE_VELOCITY_THRESHOLD = 1000;
-const DRAG_ACTIVATION_OFFSET = 10;
+const DEFAULT_CLOSE_VELOCITY_THRESHOLD = 1000;
+const DEFAULT_DRAG_ACTIVATION_OFFSET = 10;
 const Drawer = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     visible: controlledVisible,
@@ -48,6 +48,9 @@ const Drawer = /*#__PURE__*/forwardRef((props, ref) => {
   const theme = useTheme();
   const insets = useSafeAreaInsets();
   const isControlled = typeof controlledVisible === 'boolean';
+  const drawerTokens = theme.components.drawer;
+  const closeVelocityThreshold = drawerTokens?.closeVelocityThreshold ?? DEFAULT_CLOSE_VELOCITY_THRESHOLD;
+  const dragActivationOffset = drawerTokens?.dragActivationOffset ?? DEFAULT_DRAG_ACTIVATION_OFFSET;
   const [windowDims, setWindowDims] = useState(() => Dimensions.get('window'));
   useEffect(() => {
     const sub = Dimensions.addEventListener('change', ({
@@ -132,9 +135,9 @@ const Drawer = /*#__PURE__*/forwardRef((props, ref) => {
     const swipeAllowed = enableSwipe;
     let g = Gesture.Pan();
     if (isHorizontal) {
-      g = g.activeOffsetX([-DRAG_ACTIVATION_OFFSET, DRAG_ACTIVATION_OFFSET]).failOffsetY([-15, 15]);
+      g = g.activeOffsetX([-dragActivationOffset, dragActivationOffset]).failOffsetY([-15, 15]);
     } else {
-      g = g.activeOffsetY([-DRAG_ACTIVATION_OFFSET, DRAG_ACTIVATION_OFFSET]).failOffsetX([-15, 15]);
+      g = g.activeOffsetY([-dragActivationOffset, dragActivationOffset]).failOffsetX([-15, 15]);
     }
     return g.onStart(() => {
       'worklet';
@@ -172,9 +175,9 @@ const Drawer = /*#__PURE__*/forwardRef((props, ref) => {
       //   bottom → positive Y
       let isFastClose = false;
       if (sideValue === 'left' || sideValue === 'top') {
-        isFastClose = velocity < -CLOSE_VELOCITY_THRESHOLD;
+        isFastClose = velocity < -closeVelocityThreshold;
       } else {
-        isFastClose = velocity > CLOSE_VELOCITY_THRESHOLD;
+        isFastClose = velocity > closeVelocityThreshold;
       }
       const closedAbs = Math.abs(closed);
       const traveledClosed = Math.abs(releaseOffset) / closedAbs; // 0 = open, 1 = closed
@@ -187,7 +190,7 @@ const Drawer = /*#__PURE__*/forwardRef((props, ref) => {
         offset.value = withSpring(0, springCfg);
       }
     });
-  }, [closedOffset, dragStart, enableSwipe, isHorizontal, offset, setOpenJS, side, springCfg]);
+  }, [closedOffset, dragStart, enableSwipe, isHorizontal, offset, setOpenJS, side, springCfg, closeVelocityThreshold, dragActivationOffset]);
 
   // ───────── Animated styles ─────────
   const sheetStyle = useAnimatedStyle(() => {
@@ -216,9 +219,9 @@ const Drawer = /*#__PURE__*/forwardRef((props, ref) => {
   const styles = useMemo(() => buildStyles(theme), [theme]);
   const handleBackdropPress = useCallback(() => {
     if (!enableBackdropPress) return;
-    triggerHaptic('selection');
+    if (drawerTokens?.backdropPressHaptic) triggerHaptic('selection');
     close();
-  }, [enableBackdropPress, close]);
+  }, [enableBackdropPress, close, drawerTokens?.backdropPressHaptic]);
 
   // Per-side container layout — must be a hook on every render path so we
   // can't gate it on the lazy-mount early-return below.
@@ -297,7 +300,7 @@ const Drawer = /*#__PURE__*/forwardRef((props, ref) => {
     }), /*#__PURE__*/_jsx(GestureDetector, {
       gesture: panGesture,
       children: /*#__PURE__*/_jsx(Animated.View, {
-        accessibilityRole: 'dialog',
+        accessibilityRole: "alert",
         accessibilityLabel: accessibilityLabel ?? 'Drawer',
         accessibilityViewIsModal: isOpen,
         style: [sideLayout, {