@sendbird/uikit-react-native-foundation 1.0.0-rc.3 → 1.0.1

package/lib/module/ui/LoadingSpinner/index.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["React","useEffect","useRef","Animated","Easing","useUIKitTheme","Icon","LoadingSpinner","size","color","style","colors","primary","useLoopAnimated","duration","useNativeDriver","animated","Value","current","loop","timing","toValue","easing","inOut","linear","resetBeforeIteration","start","stopAnimation","setValue","Rotate","children","rotate","interpolate","inputRange","outputRange","transform"],"sources":["index.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport { Animated, Easing, StyleProp, ViewStyle } from 'react-native';\n\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Icon from '../Icon';\n\ntype Props = {\n  size?: number;\n  color?: string;\n  style?: StyleProp<ViewStyle>;\n};\n\nconst LoadingSpinner: React.FC<Props> = ({ size = 24, color, style }) => {\n  const { colors } = useUIKitTheme();\n  return (\n    <Rotate style={style}>\n      <Icon icon={'spinner'} size={size} color={color ?? colors.primary} />\n    </Rotate>\n  );\n};\n\nconst useLoopAnimated = (duration: number, useNativeDriver = true) => {\n  const animated = useRef(new Animated.Value(0)).current;\n\n  useEffect(() => {\n    Animated.loop(\n      Animated.timing(animated, { toValue: 1, duration, useNativeDriver, easing: Easing.inOut(Easing.linear) }),\n      { resetBeforeIteration: true },\n    ).start();\n\n    return () => {\n      animated.stopAnimation();\n      animated.setValue(0);\n    };\n  }, []);\n\n  return animated;\n};\n\nconst Rotate: React.FC<{ style: StyleProp<ViewStyle> }> = ({ children, style }) => {\n  const loop = useLoopAnimated(1000);\n  const rotate = loop.interpolate({ inputRange: [0, 1], outputRange: ['0deg', '360deg'] });\n  return <Animated.View style={[style, { transform: [{ rotate }] }]}>{children}</Animated.View>;\n};\n\nexport default LoadingSpinner;\n"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,SAAhB,EAA2BC,MAA3B,QAAyC,OAAzC;AACA,SAASC,QAAT,EAAmBC,MAAnB,QAAuD,cAAvD;AAEA,OAAOC,aAAP,MAA0B,2BAA1B;AACA,OAAOC,IAAP,MAAiB,SAAjB;;AAQA,MAAMC,cAA+B,GAAG,QAAiC;EAAA,IAAhC;IAAEC,IAAI,GAAG,EAAT;IAAaC,KAAb;IAAoBC;EAApB,CAAgC;EACvE,MAAM;IAAEC;EAAF,IAAaN,aAAa,EAAhC;EACA,oBACE,oBAAC,MAAD;IAAQ,KAAK,EAAEK;EAAf,gBACE,oBAAC,IAAD;IAAM,IAAI,EAAE,SAAZ;IAAuB,IAAI,EAAEF,IAA7B;IAAmC,KAAK,EAAEC,KAAK,IAAIE,MAAM,CAACC;EAA1D,EADF,CADF;AAKD,CAPD;;AASA,MAAMC,eAAe,GAAG,UAACC,QAAD,EAA8C;EAAA,IAA3BC,eAA2B,uEAAT,IAAS;EACpE,MAAMC,QAAQ,GAAGd,MAAM,CAAC,IAAIC,QAAQ,CAACc,KAAb,CAAmB,CAAnB,CAAD,CAAN,CAA8BC,OAA/C;EAEAjB,SAAS,CAAC,MAAM;IACdE,QAAQ,CAACgB,IAAT,CACEhB,QAAQ,CAACiB,MAAT,CAAgBJ,QAAhB,EAA0B;MAAEK,OAAO,EAAE,CAAX;MAAcP,QAAd;MAAwBC,eAAxB;MAAyCO,MAAM,EAAElB,MAAM,CAACmB,KAAP,CAAanB,MAAM,CAACoB,MAApB;IAAjD,CAA1B,CADF,EAEE;MAAEC,oBAAoB,EAAE;IAAxB,CAFF,EAGEC,KAHF;IAKA,OAAO,MAAM;MACXV,QAAQ,CAACW,aAAT;MACAX,QAAQ,CAACY,QAAT,CAAkB,CAAlB;IACD,CAHD;EAID,CAVQ,EAUN,EAVM,CAAT;EAYA,OAAOZ,QAAP;AACD,CAhBD;;AAkBA,MAAMa,MAAiD,GAAG,SAAyB;EAAA,IAAxB;IAAEC,QAAF;IAAYpB;EAAZ,CAAwB;EACjF,MAAMS,IAAI,GAAGN,eAAe,CAAC,IAAD,CAA5B;EACA,MAAMkB,MAAM,GAAGZ,IAAI,CAACa,WAAL,CAAiB;IAAEC,UAAU,EAAE,CAAC,CAAD,EAAI,CAAJ,CAAd;IAAsBC,WAAW,EAAE,CAAC,MAAD,EAAS,QAAT;EAAnC,CAAjB,CAAf;EACA,oBAAO,oBAAC,QAAD,CAAU,IAAV;IAAe,KAAK,EAAE,CAACxB,KAAD,EAAQ;MAAEyB,SAAS,EAAE,CAAC;QAAEJ;MAAF,CAAD;IAAb,CAAR;EAAtB,GAA6DD,QAA7D,CAAP;AACD,CAJD;;AAMA,eAAevB,cAAf"}

package/lib/module/ui/MenuBar/index.js

@@ -1,71 +0,0 @@
-import React from 'react';
-import { Pressable, View } from 'react-native';
-import { conditionChaining } from '@sendbird/uikit-utils';
-import createStyleSheet from '../../styles/createStyleSheet';
-import useUIKitTheme from '../../theme/useUIKitTheme';
-import Divider from '../Divider';
-import Icon from '../Icon';
-import Text from '../Text';
-
-const MenuBar = _ref => {
-  let {
-    variant = 'default',
-    disabled,
-    onPress,
-    name,
-    icon,
-    iconColor,
-    iconBackgroundColor,
-    actionLabel,
-    actionItem = null
-  } = _ref;
-  const {
-    palette,
-    colors
-  } = useUIKitTheme();
-  return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Pressable, {
-    disabled: disabled,
-    onPress: onPress,
-    style: styles.container
-  }, icon && /*#__PURE__*/React.createElement(Icon, {
-    icon: icon,
-    size: variant === 'contained' ? 16 : 24,
-    color: conditionChaining([variant === 'contained', iconColor], [palette.background50, iconColor, colors.primary]),
-    containerStyle: [styles.icon, variant === 'contained' && styles.containedIcon, variant === 'contained' && {
-      backgroundColor: iconBackgroundColor ?? palette.background400
-    }]
-  }), /*#__PURE__*/React.createElement(Text, {
-    subtitle2: true,
-    numberOfLines: 1,
-    style: styles.name
-  }, name), Boolean(actionLabel) && /*#__PURE__*/React.createElement(Text, {
-    subtitle2: true,
-    numberOfLines: 1,
-    color: colors.onBackground02,
-    style: styles.actionLabel
-  }, actionLabel), actionItem), /*#__PURE__*/React.createElement(Divider, null));
-};
-
-const styles = createStyleSheet({
-  container: {
-    paddingVertical: 16,
-    flexDirection: 'row',
-    alignItems: 'center'
-  },
-  name: {
-    flex: 1,
-    marginRight: 8
-  },
-  icon: {
-    marginRight: 16
-  },
-  containedIcon: {
-    borderRadius: 24,
-    padding: 4
-  },
-  actionLabel: {
-    marginRight: 4
-  }
-});
-export default MenuBar;
-//# sourceMappingURL=index.js.map

package/lib/module/ui/MenuBar/index.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["React","Pressable","View","conditionChaining","createStyleSheet","useUIKitTheme","Divider","Icon","Text","MenuBar","variant","disabled","onPress","name","icon","iconColor","iconBackgroundColor","actionLabel","actionItem","palette","colors","styles","container","background50","primary","containedIcon","backgroundColor","background400","Boolean","onBackground02","paddingVertical","flexDirection","alignItems","flex","marginRight","borderRadius","padding"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\nimport { Pressable, View } from 'react-native';\n\nimport { conditionChaining } from '@sendbird/uikit-utils';\n\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Divider from '../Divider';\nimport Icon from '../Icon';\nimport Text from '../Text';\n\nexport type MenuBarProps = {\n  variant?: 'default' | 'contained';\n\n  onPress: () => void;\n  disabled?: boolean;\n\n  icon: keyof typeof Icon.Assets;\n  iconColor?: string;\n  iconBackgroundColor?: string;\n  name: string;\n\n  actionLabel?: string;\n  actionItem?: React.ReactNode;\n};\nconst MenuBar: React.FC<MenuBarProps> = ({\n  variant = 'default',\n  disabled,\n  onPress,\n  name,\n  icon,\n  iconColor,\n  iconBackgroundColor,\n  actionLabel,\n  actionItem = null,\n}) => {\n  const { palette, colors } = useUIKitTheme();\n\n  return (\n    <View>\n      <Pressable disabled={disabled} onPress={onPress} style={styles.container}>\n        {icon && (\n          <Icon\n            icon={icon}\n            size={variant === 'contained' ? 16 : 24}\n            color={conditionChaining(\n              [variant === 'contained', iconColor],\n              [palette.background50, iconColor, colors.primary],\n            )}\n            containerStyle={[\n              styles.icon,\n              variant === 'contained' && styles.containedIcon,\n              variant === 'contained' && { backgroundColor: iconBackgroundColor ?? palette.background400 },\n            ]}\n          />\n        )}\n        <Text subtitle2 numberOfLines={1} style={styles.name}>\n          {name}\n        </Text>\n        {Boolean(actionLabel) && (\n          <Text subtitle2 numberOfLines={1} color={colors.onBackground02} style={styles.actionLabel}>\n            {actionLabel}\n          </Text>\n        )}\n        {actionItem}\n      </Pressable>\n      <Divider />\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    paddingVertical: 16,\n    flexDirection: 'row',\n    alignItems: 'center',\n  },\n  name: {\n    flex: 1,\n    marginRight: 8,\n  },\n  icon: {\n    marginRight: 16,\n  },\n  containedIcon: {\n    borderRadius: 24,\n    padding: 4,\n  },\n  actionLabel: {\n    marginRight: 4,\n  },\n});\n\nexport default MenuBar;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,SAAT,EAAoBC,IAApB,QAAgC,cAAhC;AAEA,SAASC,iBAAT,QAAkC,uBAAlC;AAEA,OAAOC,gBAAP,MAA6B,+BAA7B;AACA,OAAOC,aAAP,MAA0B,2BAA1B;AACA,OAAOC,OAAP,MAAoB,YAApB;AACA,OAAOC,IAAP,MAAiB,SAAjB;AACA,OAAOC,IAAP,MAAiB,SAAjB;;AAgBA,MAAMC,OAA+B,GAAG,QAUlC;EAAA,IAVmC;IACvCC,OAAO,GAAG,SAD6B;IAEvCC,QAFuC;IAGvCC,OAHuC;IAIvCC,IAJuC;IAKvCC,IALuC;IAMvCC,SANuC;IAOvCC,mBAPuC;IAQvCC,WARuC;IASvCC,UAAU,GAAG;EAT0B,CAUnC;EACJ,MAAM;IAAEC,OAAF;IAAWC;EAAX,IAAsBf,aAAa,EAAzC;EAEA,oBACE,oBAAC,IAAD,qBACE,oBAAC,SAAD;IAAW,QAAQ,EAAEM,QAArB;IAA+B,OAAO,EAAEC,OAAxC;IAAiD,KAAK,EAAES,MAAM,CAACC;EAA/D,GACGR,IAAI,iBACH,oBAAC,IAAD;IACE,IAAI,EAAEA,IADR;IAEE,IAAI,EAAEJ,OAAO,KAAK,WAAZ,GAA0B,EAA1B,GAA+B,EAFvC;IAGE,KAAK,EAAEP,iBAAiB,CACtB,CAACO,OAAO,KAAK,WAAb,EAA0BK,SAA1B,CADsB,EAEtB,CAACI,OAAO,CAACI,YAAT,EAAuBR,SAAvB,EAAkCK,MAAM,CAACI,OAAzC,CAFsB,CAH1B;IAOE,cAAc,EAAE,CACdH,MAAM,CAACP,IADO,EAEdJ,OAAO,KAAK,WAAZ,IAA2BW,MAAM,CAACI,aAFpB,EAGdf,OAAO,KAAK,WAAZ,IAA2B;MAAEgB,eAAe,EAAEV,mBAAmB,IAAIG,OAAO,CAACQ;IAAlD,CAHb;EAPlB,EAFJ,eAgBE,oBAAC,IAAD;IAAM,SAAS,MAAf;IAAgB,aAAa,EAAE,CAA/B;IAAkC,KAAK,EAAEN,MAAM,CAACR;EAAhD,GACGA,IADH,CAhBF,EAmBGe,OAAO,CAACX,WAAD,CAAP,iBACC,oBAAC,IAAD;IAAM,SAAS,MAAf;IAAgB,aAAa,EAAE,CAA/B;IAAkC,KAAK,EAAEG,MAAM,CAACS,cAAhD;IAAgE,KAAK,EAAER,MAAM,CAACJ;EAA9E,GACGA,WADH,CApBJ,EAwBGC,UAxBH,CADF,eA2BE,oBAAC,OAAD,OA3BF,CADF;AA+BD,CA5CD;;AA8CA,MAAMG,MAAM,GAAGjB,gBAAgB,CAAC;EAC9BkB,SAAS,EAAE;IACTQ,eAAe,EAAE,EADR;IAETC,aAAa,EAAE,KAFN;IAGTC,UAAU,EAAE;EAHH,CADmB;EAM9BnB,IAAI,EAAE;IACJoB,IAAI,EAAE,CADF;IAEJC,WAAW,EAAE;EAFT,CANwB;EAU9BpB,IAAI,EAAE;IACJoB,WAAW,EAAE;EADT,CAVwB;EAa9BT,aAAa,EAAE;IACbU,YAAY,EAAE,EADD;IAEbC,OAAO,EAAE;EAFI,CAbe;EAiB9BnB,WAAW,EAAE;IACXiB,WAAW,EAAE;EADF;AAjBiB,CAAD,CAA/B;AAsBA,eAAezB,OAAf"}

package/lib/module/ui/Modal/index.js

@@ -1,196 +0,0 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-import React, { useEffect, useRef, useState } from 'react';
-import { Animated, Dimensions, KeyboardAvoidingView, PanResponder, Platform, Pressable, Modal as RNModal, StyleSheet, TouchableWithoutFeedback, useWindowDimensions } from 'react-native';
-import createStyleSheet from '../../styles/createStyleSheet';
-import useHeaderStyle from '../../styles/useHeaderStyle';
-import useUIKitTheme from '../../theme/useUIKitTheme';
-
-/**
- * Modal Open: Triggered by Modal.props.visible state changed to true
- * - visible true -> modalVisible true -> animation start
- *
- * Modal Close: Triggered by Modal.props.onClose() call
- * - Modal.props.onClose() -> visible false -> animation start -> modalVisible false
- * */
-const Modal = _ref => {
-  let {
-    children,
-    onClose,
-    backgroundStyle,
-    onDismiss,
-    type = 'fade',
-    visible = false,
-    disableBackgroundClose = false,
-    enableKeyboardAvoid = false,
-    statusBarTranslucent,
-    ...props
-  } = _ref;
-  const {
-    palette
-  } = useUIKitTheme();
-  const {
-    content,
-    backdrop,
-    showTransition,
-    hideTransition
-  } = useModalAnimation(type);
-  const panResponder = useModalPanResponder(type, content.translateY, showTransition, onClose);
-  const {
-    topInset
-  } = useHeaderStyle();
-  const [modalVisible, setModalVisible] = useState(false);
-
-  const showAction = () => setModalVisible(true);
-
-  const hideAction = () => hideTransition(() => setModalVisible(false));
-
-  const {
-    width,
-    height
-  } = useWindowDimensions();
-  useEffect(() => {
-    if (visible) showAction();else hideAction();
-  }, [visible]);
-  useOnDismiss(modalVisible, onDismiss);
-  return /*#__PURE__*/React.createElement(RNModal, _extends({
-    transparent: true,
-    hardwareAccelerated: true,
-    visible: modalVisible,
-    onRequestClose: onClose,
-    onShow: () => showTransition(),
-    onDismiss: onDismiss,
-    supportedOrientations: ['portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right'],
-    animationType: 'none'
-  }, props), /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
-    onPress: disableBackgroundClose ? undefined : onClose
-  }, /*#__PURE__*/React.createElement(Animated.View, {
-    style: [StyleSheet.absoluteFill, {
-      opacity: backdrop.opacity,
-      backgroundColor: palette.onBackgroundLight03
-    }]
-  })), /*#__PURE__*/React.createElement(KeyboardAvoidingView // NOTE: This is trick for Android.
-  //  When orientation is changed on Android, the offset that to avoid soft-keyboard is not updated normally.
-  , {
-    key: `${width}-${height}`,
-    enabled: enableKeyboardAvoid,
-    style: styles.background,
-    behavior: Platform.select({
-      ios: 'padding',
-      default: 'height'
-    }),
-    pointerEvents: 'box-none',
-    keyboardVerticalOffset: enableKeyboardAvoid && statusBarTranslucent ? -topInset : 0
-  }, /*#__PURE__*/React.createElement(Animated.View, _extends({
-    style: [styles.background, backgroundStyle, {
-      opacity: content.opacity,
-      transform: [{
-        translateY: content.translateY
-      }]
-    }],
-    pointerEvents: 'box-none'
-  }, panResponder.panHandlers), /*#__PURE__*/React.createElement(Pressable // NOTE: https://github.com/facebook/react-native/issues/14295
-  //  Due to 'Pressable', the width of the children must be explicitly specified as a number.
-  , null, children))));
-};
-
-const isHideGesture = (distanceY, velocityY) => {
-  return distanceY > 125 || distanceY > 0 && velocityY > 0.1;
-};
-
-const useModalPanResponder = (type, translateY, show, hide) => {
-  if (type === 'fade') return {
-    panHandlers: {}
-  };
-  return React.useRef(PanResponder.create({
-    onMoveShouldSetPanResponderCapture: (_, _ref2) => {
-      let {
-        dy
-      } = _ref2;
-      return dy > 8;
-    },
-    // @ts-ignore
-    onPanResponderGrant: () => translateY.setOffset(translateY.__getValue()),
-    onPanResponderMove: (_, _ref3) => {
-      let {
-        dy
-      } = _ref3;
-      return dy >= 0 && translateY.setValue(dy);
-    },
-    // Animated.event([null, { dy: translateY }], { useNativeDriver: false }),
-    onPanResponderRelease: (_, _ref4) => {
-      let {
-        dy,
-        vy
-      } = _ref4;
-      if (isHideGesture(dy, vy)) hide();else show();
-    }
-  })).current;
-};
-
-const useModalAnimation = type => {
-  const initialY = type === 'slide' ? Dimensions.get('window').height : 0;
-  const baseAnimBackground = useRef(new Animated.Value(0)).current;
-  const baseAnimContent = useRef(new Animated.Value(initialY)).current;
-  const content = {
-    opacity: baseAnimBackground.interpolate({
-      inputRange: [0, 1],
-      outputRange: [type === 'slide' ? 1 : 0, 1]
-    }),
-    translateY: baseAnimContent
-  };
-  const backdrop = {
-    opacity: baseAnimBackground.interpolate({
-      inputRange: [0, 1],
-      outputRange: [0, 1]
-    })
-  };
-
-  const createTransition = toValue => {
-    const config = {
-      duration: 250,
-      useNativeDriver: false
-    };
-    return Animated.parallel([Animated.timing(baseAnimBackground, {
-      toValue,
-      ...config
-    }), Animated.timing(baseAnimContent, {
-      toValue: toValue === 0 ? initialY : 0,
-      ...config
-    })]).start;
-  };
-
-  return {
-    content,
-    backdrop,
-    showTransition: createTransition(1),
-    hideTransition: createTransition(0)
-  };
-}; // NOTE: onDismiss is supports iOS only
-
-
-const useOnDismiss = (visible, onDismiss) => {
-  const prevVisible = usePrevProp(visible);
-  useEffect(() => {
-    if (Platform.OS === 'ios') return;
-    if (prevVisible && !visible) onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
-  }, [prevVisible, visible]);
-};
-
-const usePrevProp = prop => {
-  const prev = useRef(prop);
-  const curr = useRef(prop);
-  useEffect(() => {
-    prev.current = curr.current;
-    curr.current = prop;
-  });
-  return prev.current;
-};
-
-const styles = createStyleSheet({
-  background: {
-    flex: 1
-  }
-});
-export default Modal;
-//# sourceMappingURL=index.js.map

package/lib/module/ui/Modal/index.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["React","useEffect","useRef","useState","Animated","Dimensions","KeyboardAvoidingView","PanResponder","Platform","Pressable","Modal","RNModal","StyleSheet","TouchableWithoutFeedback","useWindowDimensions","createStyleSheet","useHeaderStyle","useUIKitTheme","children","onClose","backgroundStyle","onDismiss","type","visible","disableBackgroundClose","enableKeyboardAvoid","statusBarTranslucent","props","palette","content","backdrop","showTransition","hideTransition","useModalAnimation","panResponder","useModalPanResponder","translateY","topInset","modalVisible","setModalVisible","showAction","hideAction","width","height","useOnDismiss","undefined","absoluteFill","opacity","backgroundColor","onBackgroundLight03","styles","background","select","ios","default","transform","panHandlers","isHideGesture","distanceY","velocityY","show","hide","create","onMoveShouldSetPanResponderCapture","_","dy","onPanResponderGrant","setOffset","__getValue","onPanResponderMove","setValue","onPanResponderRelease","vy","current","initialY","get","baseAnimBackground","Value","baseAnimContent","interpolate","inputRange","outputRange","createTransition","toValue","config","duration","useNativeDriver","parallel","timing","start","prevVisible","usePrevProp","OS","prop","prev","curr","flex"],"sources":["index.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport {\n  Animated,\n  Dimensions,\n  KeyboardAvoidingView,\n  ModalProps,\n  PanResponder,\n  Platform,\n  Pressable,\n  Modal as RNModal,\n  StyleProp,\n  StyleSheet,\n  TouchableWithoutFeedback,\n  ViewStyle,\n  useWindowDimensions,\n} from 'react-native';\n\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useHeaderStyle from '../../styles/useHeaderStyle';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\n\ntype Props = {\n  type?: 'slide' | 'fade';\n  onClose: () => void;\n  backgroundStyle?: StyleProp<ViewStyle>;\n  disableBackgroundClose?: boolean;\n  enableKeyboardAvoid?: boolean;\n} & Omit<ModalProps, 'animationType' | 'onRequestClose'>;\n\n/**\n * Modal Open: Triggered by Modal.props.visible state changed to true\n * - visible true -> modalVisible true -> animation start\n *\n * Modal Close: Triggered by Modal.props.onClose() call\n * - Modal.props.onClose() -> visible false -> animation start -> modalVisible false\n * */\nconst Modal: React.FC<Props> = ({\n  children,\n  onClose,\n  backgroundStyle,\n  onDismiss,\n  type = 'fade',\n  visible = false,\n  disableBackgroundClose = false,\n  enableKeyboardAvoid = false,\n  statusBarTranslucent,\n  ...props\n}) => {\n  const { palette } = useUIKitTheme();\n  const { content, backdrop, showTransition, hideTransition } = useModalAnimation(type);\n  const panResponder = useModalPanResponder(type, content.translateY, showTransition, onClose);\n  const { topInset } = useHeaderStyle();\n\n  const [modalVisible, setModalVisible] = useState(false);\n  const showAction = () => setModalVisible(true);\n  const hideAction = () => hideTransition(() => setModalVisible(false));\n\n  const { width, height } = useWindowDimensions();\n\n  useEffect(() => {\n    if (visible) showAction();\n    else hideAction();\n  }, [visible]);\n\n  useOnDismiss(modalVisible, onDismiss);\n\n  return (\n    <RNModal\n      transparent\n      hardwareAccelerated\n      visible={modalVisible}\n      onRequestClose={onClose}\n      onShow={() => showTransition()}\n      onDismiss={onDismiss}\n      supportedOrientations={['portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right']}\n      animationType={'none'}\n      {...props}\n    >\n      <TouchableWithoutFeedback onPress={disableBackgroundClose ? undefined : onClose}>\n        <Animated.View\n          style={[StyleSheet.absoluteFill, { opacity: backdrop.opacity, backgroundColor: palette.onBackgroundLight03 }]}\n        />\n      </TouchableWithoutFeedback>\n      <KeyboardAvoidingView\n        // NOTE: This is trick for Android.\n        //  When orientation is changed on Android, the offset that to avoid soft-keyboard is not updated normally.\n        key={`${width}-${height}`}\n        enabled={enableKeyboardAvoid}\n        style={styles.background}\n        behavior={Platform.select({ ios: 'padding', default: 'height' })}\n        pointerEvents={'box-none'}\n        keyboardVerticalOffset={enableKeyboardAvoid && statusBarTranslucent ? -topInset : 0}\n      >\n        <Animated.View\n          style={[\n            styles.background,\n            backgroundStyle,\n            { opacity: content.opacity, transform: [{ translateY: content.translateY }] },\n          ]}\n          pointerEvents={'box-none'}\n          {...panResponder.panHandlers}\n        >\n          <Pressable\n          // NOTE: https://github.com/facebook/react-native/issues/14295\n          //  Due to 'Pressable', the width of the children must be explicitly specified as a number.\n          >\n            {children}\n          </Pressable>\n        </Animated.View>\n      </KeyboardAvoidingView>\n    </RNModal>\n  );\n};\n\nconst isHideGesture = (distanceY: number, velocityY: number) => {\n  return distanceY > 125 || (distanceY > 0 && velocityY > 0.1);\n};\nconst useModalPanResponder = (\n  type: 'slide' | 'fade',\n  translateY: Animated.Value,\n  show: () => void,\n  hide: () => void,\n) => {\n  if (type === 'fade') return { panHandlers: {} };\n  return React.useRef(\n    PanResponder.create({\n      onMoveShouldSetPanResponderCapture: (_, { dy }) => dy > 8,\n      // @ts-ignore\n      onPanResponderGrant: () => translateY.setOffset(translateY.__getValue()),\n      onPanResponderMove: (_, { dy }) => dy >= 0 && translateY.setValue(dy), // Animated.event([null, { dy: translateY }], { useNativeDriver: false }),\n      onPanResponderRelease: (_, { dy, vy }) => {\n        if (isHideGesture(dy, vy)) hide();\n        else show();\n      },\n    }),\n  ).current;\n};\n\nconst useModalAnimation = (type: 'slide' | 'fade') => {\n  const initialY = type === 'slide' ? Dimensions.get('window').height : 0;\n  const baseAnimBackground = useRef(new Animated.Value(0)).current;\n  const baseAnimContent = useRef(new Animated.Value(initialY)).current;\n\n  const content = {\n    opacity: baseAnimBackground.interpolate({\n      inputRange: [0, 1],\n      outputRange: [type === 'slide' ? 1 : 0, 1],\n    }),\n    translateY: baseAnimContent,\n  };\n  const backdrop = {\n    opacity: baseAnimBackground.interpolate({\n      inputRange: [0, 1],\n      outputRange: [0, 1],\n    }),\n  };\n  const createTransition = (toValue: 0 | 1) => {\n    const config = { duration: 250, useNativeDriver: false };\n    return Animated.parallel([\n      Animated.timing(baseAnimBackground, { toValue, ...config }),\n      Animated.timing(baseAnimContent, { toValue: toValue === 0 ? initialY : 0, ...config }),\n    ]).start;\n  };\n  return {\n    content,\n    backdrop,\n    showTransition: createTransition(1),\n    hideTransition: createTransition(0),\n  };\n};\n\n// NOTE: onDismiss is supports iOS only\nconst useOnDismiss = (visible: boolean, onDismiss?: () => void) => {\n  const prevVisible = usePrevProp(visible);\n  useEffect(() => {\n    if (Platform.OS === 'ios') return;\n    if (prevVisible && !visible) onDismiss?.();\n  }, [prevVisible, visible]);\n};\n\nconst usePrevProp = <T,>(prop: T) => {\n  const prev = useRef(prop);\n  const curr = useRef(prop);\n  useEffect(() => {\n    prev.current = curr.current;\n    curr.current = prop;\n  });\n  return prev.current;\n};\n\nconst styles = createStyleSheet({\n  background: { flex: 1 },\n});\n\nexport default Modal;\n"],"mappings":"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"}

package/lib/module/ui/Placeholder/index.js

@@ -1,64 +0,0 @@
-import React from 'react';
-import { View } from 'react-native';
-import { conditionChaining } from '@sendbird/uikit-utils';
-import createStyleSheet from '../../styles/createStyleSheet';
-import useUIKitTheme from '../../theme/useUIKitTheme';
-import Button from '../Button';
-import Icon from '../Icon';
-import LoadingSpinner from '../LoadingSpinner';
-import Text from '../Text';
-
-const Placeholder = _ref => {
-  let {
-    icon,
-    loading = false,
-    message = '',
-    errorRetryLabel,
-    onPressRetry
-  } = _ref;
-  const {
-    colors
-  } = useUIKitTheme(); // loading ? styles.containerLoading : errorRetryLabel ? styles.containerError : styles.container
-
-  return /*#__PURE__*/React.createElement(View, {
-    style: conditionChaining([loading, errorRetryLabel], [styles.containerLoading, styles.containerError, styles.container])
-  }, conditionChaining([loading], [/*#__PURE__*/React.createElement(LoadingSpinner, {
-    size: 64,
-    color: colors.ui.placeholder.default.none.highlight
-  }), /*#__PURE__*/React.createElement(Icon, {
-    icon: icon,
-    size: 64,
-    color: colors.ui.placeholder.default.none.content
-  })]), Boolean(message) && !loading && /*#__PURE__*/React.createElement(Text, {
-    body3: true,
-    color: colors.ui.placeholder.default.none.content
-  }, message), Boolean(errorRetryLabel) && !loading && /*#__PURE__*/React.createElement(Button, {
-    variant: 'text',
-    onPress: onPressRetry,
-    contentColor: colors.ui.placeholder.default.none.highlight,
-    icon: 'refresh'
-  }, errorRetryLabel));
-};
-
-const styles = createStyleSheet({
-  container: {
-    width: 200,
-    height: 100,
-    alignItems: 'center',
-    justifyContent: 'space-between'
-  },
-  containerError: {
-    width: 200,
-    height: 148,
-    alignItems: 'center',
-    justifyContent: 'space-between'
-  },
-  containerLoading: {
-    width: 200,
-    height: 100,
-    alignItems: 'center',
-    justifyContent: 'center'
-  }
-});
-export default Placeholder;
-//# sourceMappingURL=index.js.map

package/lib/module/ui/Placeholder/index.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["React","View","conditionChaining","createStyleSheet","useUIKitTheme","Button","Icon","LoadingSpinner","Text","Placeholder","icon","loading","message","errorRetryLabel","onPressRetry","colors","styles","containerLoading","containerError","container","ui","placeholder","default","none","highlight","content","Boolean","width","height","alignItems","justifyContent"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\n\nimport { conditionChaining } from '@sendbird/uikit-utils';\n\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Button from '../Button';\nimport Icon from '../Icon';\nimport LoadingSpinner from '../LoadingSpinner';\nimport Text from '../Text';\n\ntype Props = {\n  loading?: boolean;\n\n  icon: keyof typeof Icon.Assets;\n  message?: string;\n  errorRetryLabel?: string;\n  onPressRetry?: () => void;\n};\n\nconst Placeholder: React.FC<Props> = ({ icon, loading = false, message = '', errorRetryLabel, onPressRetry }) => {\n  const { colors } = useUIKitTheme();\n\n  // loading ? styles.containerLoading : errorRetryLabel ? styles.containerError : styles.container\n  return (\n    <View\n      style={conditionChaining(\n        [loading, errorRetryLabel],\n        [styles.containerLoading, styles.containerError, styles.container],\n      )}\n    >\n      {conditionChaining(\n        [loading],\n        [\n          <LoadingSpinner size={64} color={colors.ui.placeholder.default.none.highlight} />,\n          <Icon icon={icon} size={64} color={colors.ui.placeholder.default.none.content} />,\n        ],\n      )}\n      {Boolean(message) && !loading && (\n        <Text body3 color={colors.ui.placeholder.default.none.content}>\n          {message}\n        </Text>\n      )}\n      {Boolean(errorRetryLabel) && !loading && (\n        <Button\n          variant={'text'}\n          onPress={onPressRetry}\n          contentColor={colors.ui.placeholder.default.none.highlight}\n          icon={'refresh'}\n        >\n          {errorRetryLabel}\n        </Button>\n      )}\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    width: 200,\n    height: 100,\n    alignItems: 'center',\n    justifyContent: 'space-between',\n  },\n  containerError: {\n    width: 200,\n    height: 148,\n    alignItems: 'center',\n    justifyContent: 'space-between',\n  },\n  containerLoading: {\n    width: 200,\n    height: 100,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n});\n\nexport default Placeholder;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;AAEA,SAASC,iBAAT,QAAkC,uBAAlC;AAEA,OAAOC,gBAAP,MAA6B,+BAA7B;AACA,OAAOC,aAAP,MAA0B,2BAA1B;AACA,OAAOC,MAAP,MAAmB,WAAnB;AACA,OAAOC,IAAP,MAAiB,SAAjB;AACA,OAAOC,cAAP,MAA2B,mBAA3B;AACA,OAAOC,IAAP,MAAiB,SAAjB;;AAWA,MAAMC,WAA4B,GAAG,QAA4E;EAAA,IAA3E;IAAEC,IAAF;IAAQC,OAAO,GAAG,KAAlB;IAAyBC,OAAO,GAAG,EAAnC;IAAuCC,eAAvC;IAAwDC;EAAxD,CAA2E;EAC/G,MAAM;IAAEC;EAAF,IAAaX,aAAa,EAAhC,CAD+G,CAG/G;;EACA,oBACE,oBAAC,IAAD;IACE,KAAK,EAAEF,iBAAiB,CACtB,CAACS,OAAD,EAAUE,eAAV,CADsB,EAEtB,CAACG,MAAM,CAACC,gBAAR,EAA0BD,MAAM,CAACE,cAAjC,EAAiDF,MAAM,CAACG,SAAxD,CAFsB;EAD1B,GAMGjB,iBAAiB,CAChB,CAACS,OAAD,CADgB,EAEhB,cACE,oBAAC,cAAD;IAAgB,IAAI,EAAE,EAAtB;IAA0B,KAAK,EAAEI,MAAM,CAACK,EAAP,CAAUC,WAAV,CAAsBC,OAAtB,CAA8BC,IAA9B,CAAmCC;EAApE,EADF,eAEE,oBAAC,IAAD;IAAM,IAAI,EAAEd,IAAZ;IAAkB,IAAI,EAAE,EAAxB;IAA4B,KAAK,EAAEK,MAAM,CAACK,EAAP,CAAUC,WAAV,CAAsBC,OAAtB,CAA8BC,IAA9B,CAAmCE;EAAtE,EAFF,CAFgB,CANpB,EAaGC,OAAO,CAACd,OAAD,CAAP,IAAoB,CAACD,OAArB,iBACC,oBAAC,IAAD;IAAM,KAAK,MAAX;IAAY,KAAK,EAAEI,MAAM,CAACK,EAAP,CAAUC,WAAV,CAAsBC,OAAtB,CAA8BC,IAA9B,CAAmCE;EAAtD,GACGb,OADH,CAdJ,EAkBGc,OAAO,CAACb,eAAD,CAAP,IAA4B,CAACF,OAA7B,iBACC,oBAAC,MAAD;IACE,OAAO,EAAE,MADX;IAEE,OAAO,EAAEG,YAFX;IAGE,YAAY,EAAEC,MAAM,CAACK,EAAP,CAAUC,WAAV,CAAsBC,OAAtB,CAA8BC,IAA9B,CAAmCC,SAHnD;IAIE,IAAI,EAAE;EAJR,GAMGX,eANH,CAnBJ,CADF;AA+BD,CAnCD;;AAqCA,MAAMG,MAAM,GAAGb,gBAAgB,CAAC;EAC9BgB,SAAS,EAAE;IACTQ,KAAK,EAAE,GADE;IAETC,MAAM,EAAE,GAFC;IAGTC,UAAU,EAAE,QAHH;IAITC,cAAc,EAAE;EAJP,CADmB;EAO9BZ,cAAc,EAAE;IACdS,KAAK,EAAE,GADO;IAEdC,MAAM,EAAE,GAFM;IAGdC,UAAU,EAAE,QAHE;IAIdC,cAAc,EAAE;EAJF,CAPc;EAa9Bb,gBAAgB,EAAE;IAChBU,KAAK,EAAE,GADS;IAEhBC,MAAM,EAAE,GAFQ;IAGhBC,UAAU,EAAE,QAHI;IAIhBC,cAAc,EAAE;EAJA;AAbY,CAAD,CAA/B;AAqBA,eAAerB,WAAf"}

package/lib/module/ui/Prompt/index.js

@@ -1,151 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { Keyboard, Platform, View, useWindowDimensions } from 'react-native';
-import { NOOP } from '@sendbird/uikit-utils';
-import createStyleSheet from '../../styles/createStyleSheet';
-import useHeaderStyle from '../../styles/useHeaderStyle';
-import useUIKitTheme from '../../theme/useUIKitTheme';
-import Button from '../Button';
-import DialogBox from '../Dialog/DialogBox';
-import Modal from '../Modal';
-import Text from '../Text';
-import TextInput from '../TextInput';
-
-const Prompt = _ref => {
-  let {
-    onDismiss,
-    visible,
-    onHide,
-    autoFocus = true,
-    title,
-    defaultValue = '',
-    placeholder = 'Enter',
-    onSubmit = NOOP,
-    onCancel = NOOP,
-    submitLabel = 'Submit',
-    cancelLabel = 'Cancel'
-  } = _ref;
-  const {
-    statusBarTranslucent
-  } = useHeaderStyle();
-  const {
-    colors
-  } = useUIKitTheme();
-  const inputRef = useRef(null);
-  const {
-    width,
-    height
-  } = useWindowDimensions();
-  const buttons = [{
-    text: cancelLabel,
-    onPress: onCancel
-  }, {
-    text: submitLabel,
-    onPress: () => onSubmit(text)
-  }];
-  const [text, setText] = useState(defaultValue); // FIXME: autoFocus trick with modal
-  // Android
-  // - InputProps.autoFocus is not trigger keyboard appearing.
-  // - InputRef.focus() is trigger keyboard appearing, but position of keyboard selection is always the start of text.
-  // iOS
-  // - InputProps.autoFocus is trigger weird UI behavior on landscape mode.
-
-  useEffect(() => {
-    if (autoFocus && visible) {
-      setTimeout(() => {
-        var _inputRef$current, _inputRef$current2;
-
-        if (Platform.OS === 'android') (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.blur();
-        (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
-      }, 250);
-    }
-  }, [autoFocus, visible, `${width}-${height}`]);
-  return /*#__PURE__*/React.createElement(Modal, {
-    enableKeyboardAvoid: true,
-    disableBackgroundClose: true,
-    onClose: onHide,
-    onDismiss: () => {
-      setText('');
-      onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
-    },
-    statusBarTranslucent: statusBarTranslucent,
-    visible: visible,
-    backgroundStyle: {
-      alignItems: 'center',
-      justifyContent: 'center'
-    }
-  }, /*#__PURE__*/React.createElement(DialogBox, {
-    style: styles.container
-  }, Boolean(title) && /*#__PURE__*/React.createElement(View, {
-    style: styles.titleContainer
-  }, /*#__PURE__*/React.createElement(Text, {
-    h1: true,
-    color: colors.ui.dialog.default.none.text,
-    numberOfLines: 1,
-    style: {
-      flex: 1
-    }
-  }, title)), /*#__PURE__*/React.createElement(View, {
-    style: styles.inputContainer
-  }, /*#__PURE__*/React.createElement(TextInput, {
-    autoFocus: autoFocus && Platform.OS === 'android',
-    ref: inputRef,
-    placeholder: placeholder,
-    variant: 'underline',
-    value: text,
-    onChangeText: setText,
-    style: {
-      paddingHorizontal: 0,
-      paddingVertical: 10
-    }
-  })), /*#__PURE__*/React.createElement(View, {
-    style: styles.buttonContainer
-  }, buttons.map((_ref2, index) => {
-    let {
-      text,
-      onPress
-    } = _ref2;
-    return /*#__PURE__*/React.createElement(Button, {
-      key: text + index,
-      variant: 'text',
-      style: styles.button,
-      contentColor: colors.ui.dialog.default.none.highlight,
-      onPress: () => {
-        Keyboard.dismiss();
-
-        try {
-          onPress === null || onPress === void 0 ? void 0 : onPress();
-        } finally {
-          onHide();
-        }
-      }
-    }, text);
-  }))));
-};
-
-const styles = createStyleSheet({
-  container: {
-    paddingTop: 8
-  },
-  titleContainer: {
-    marginBottom: 12,
-    paddingVertical: 12,
-    paddingHorizontal: 24,
-    flexDirection: 'row',
-    alignItems: 'center'
-  },
-  inputContainer: {
-    paddingHorizontal: 24,
-    marginBottom: 12
-  },
-  buttonContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'flex-end',
-    padding: 12
-  },
-  button: {
-    marginLeft: 8
-  }
-});
-export default Prompt;
-//# sourceMappingURL=index.js.map

package/lib/module/ui/Prompt/index.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["React","useEffect","useRef","useState","Keyboard","Platform","View","useWindowDimensions","NOOP","createStyleSheet","useHeaderStyle","useUIKitTheme","Button","DialogBox","Modal","Text","TextInput","Prompt","onDismiss","visible","onHide","autoFocus","title","defaultValue","placeholder","onSubmit","onCancel","submitLabel","cancelLabel","statusBarTranslucent","colors","inputRef","width","height","buttons","text","onPress","setText","setTimeout","OS","current","blur","focus","alignItems","justifyContent","styles","container","Boolean","titleContainer","ui","dialog","default","none","flex","inputContainer","paddingHorizontal","paddingVertical","buttonContainer","map","index","button","highlight","dismiss","paddingTop","marginBottom","flexDirection","padding","marginLeft"],"sources":["index.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { Keyboard, Platform, TextInput as RNTextInput, View, useWindowDimensions } from 'react-native';\n\nimport { NOOP } from '@sendbird/uikit-utils';\n\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useHeaderStyle from '../../styles/useHeaderStyle';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Button from '../Button';\nimport DialogBox from '../Dialog/DialogBox';\nimport Modal from '../Modal';\nimport Text from '../Text';\nimport TextInput from '../TextInput';\n\nexport type PromptItem = {\n  title: string;\n  placeholder?: string;\n  defaultValue?: string;\n  onSubmit?: (text: string) => void;\n  submitLabel?: string;\n  onCancel?: () => void;\n  cancelLabel?: string;\n};\n\ntype Props = {\n  visible: boolean;\n  onHide: () => void;\n  onDismiss?: () => void;\n  autoFocus?: boolean;\n} & PromptItem;\nconst Prompt: React.FC<Props> = ({\n  onDismiss,\n  visible,\n  onHide,\n  autoFocus = true,\n  title,\n  defaultValue = '',\n  placeholder = 'Enter',\n  onSubmit = NOOP,\n  onCancel = NOOP,\n  submitLabel = 'Submit',\n  cancelLabel = 'Cancel',\n}) => {\n  const { statusBarTranslucent } = useHeaderStyle();\n  const { colors } = useUIKitTheme();\n  const inputRef = useRef<RNTextInput>(null);\n  const { width, height } = useWindowDimensions();\n\n  const buttons = [\n    { text: cancelLabel, onPress: onCancel },\n    { text: submitLabel, onPress: () => onSubmit(text) },\n  ];\n\n  const [text, setText] = useState(defaultValue);\n\n  // FIXME: autoFocus trick with modal\n  // Android\n  // - InputProps.autoFocus is not trigger keyboard appearing.\n  // - InputRef.focus() is trigger keyboard appearing, but position of keyboard selection is always the start of text.\n  // iOS\n  // - InputProps.autoFocus is trigger weird UI behavior on landscape mode.\n  useEffect(() => {\n    if (autoFocus && visible) {\n      setTimeout(() => {\n        if (Platform.OS === 'android') inputRef.current?.blur();\n        inputRef.current?.focus();\n      }, 250);\n    }\n  }, [autoFocus, visible, `${width}-${height}`]);\n\n  return (\n    <Modal\n      enableKeyboardAvoid\n      disableBackgroundClose\n      onClose={onHide}\n      onDismiss={() => {\n        setText('');\n        onDismiss?.();\n      }}\n      statusBarTranslucent={statusBarTranslucent}\n      visible={visible}\n      backgroundStyle={{ alignItems: 'center', justifyContent: 'center' }}\n    >\n      <DialogBox style={styles.container}>\n        {Boolean(title) && (\n          <View style={styles.titleContainer}>\n            <Text h1 color={colors.ui.dialog.default.none.text} numberOfLines={1} style={{ flex: 1 }}>\n              {title}\n            </Text>\n          </View>\n        )}\n\n        <View style={styles.inputContainer}>\n          <TextInput\n            autoFocus={autoFocus && Platform.OS === 'android'}\n            ref={inputRef}\n            placeholder={placeholder}\n            variant={'underline'}\n            value={text}\n            onChangeText={setText}\n            style={{ paddingHorizontal: 0, paddingVertical: 10 }}\n          />\n        </View>\n\n        <View style={styles.buttonContainer}>\n          {buttons.map(({ text, onPress }, index) => {\n            return (\n              <Button\n                key={text + index}\n                variant={'text'}\n                style={styles.button}\n                contentColor={colors.ui.dialog.default.none.highlight}\n                onPress={() => {\n                  Keyboard.dismiss();\n                  try {\n                    onPress?.();\n                  } finally {\n                    onHide();\n                  }\n                }}\n              >\n                {text}\n              </Button>\n            );\n          })}\n        </View>\n      </DialogBox>\n    </Modal>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    paddingTop: 8,\n  },\n  titleContainer: {\n    marginBottom: 12,\n    paddingVertical: 12,\n    paddingHorizontal: 24,\n    flexDirection: 'row',\n    alignItems: 'center',\n  },\n  inputContainer: {\n    paddingHorizontal: 24,\n    marginBottom: 12,\n  },\n  buttonContainer: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'flex-end',\n    padding: 12,\n  },\n  button: {\n    marginLeft: 8,\n  },\n});\n\nexport default Prompt;\n"],"mappings":"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"}