@sendbird/uikit-react-native-foundation 3.1.2 → 3.3.0

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

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useRef","useState","Animated","Dimensions","KeyboardAvoidingView","PanResponder","Platform","Pressable","Modal","RNModal","StyleSheet","TouchableWithoutFeedback","useWindowDimensions","createStyleSheet","useHeaderStyle","useUIKitTheme","_ref","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","createElement","_extends","transparent","hardwareAccelerated","onRequestClose","onShow","supportedOrientations","animationType","onPress","undefined","View","style","absoluteFill","opacity","backgroundColor","onBackgroundLight03","key","enabled","styles","background","behavior","select","ios","default","pointerEvents","keyboardVerticalOffset","transform","panHandlers","isHideGesture","distanceY","velocityY","show","hide","create","onMoveShouldSetPanResponderCapture","_","_ref2","dy","onPanResponderGrant","setOffset","__getValue","onPanResponderMove","_ref3","setValue","onPanResponderRelease","_ref4","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 ModalAnimationType = 'slide' | 'slide-no-gesture' | 'fade';\ntype Props = {\n  type?: ModalAnimationType;\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 = ({\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}: Props) => {\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      statusBarTranslucent={statusBarTranslucent}\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: ModalAnimationType,\n  translateY: Animated.Value,\n  show: () => void,\n  hide: () => void,\n) => {\n  if (type === 'fade' || type === 'slide-no-gesture') 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: ModalAnimationType) => {\n  const initialY = type === 'fade' ? 0 : Dimensions.get('window').height;\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 === 'fade' ? 0 : 1, 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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"}
+{"version":3,"names":["React","useEffect","useRef","useState","Animated","Dimensions","KeyboardAvoidingView","PanResponder","Platform","Pressable","Modal","RNModal","StyleSheet","TouchableWithoutFeedback","useWindowDimensions","createStyleSheet","useHeaderStyle","useUIKitTheme","_ref","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","createElement","_extends","transparent","hardwareAccelerated","onRequestClose","onShow","supportedOrientations","animationType","onPress","undefined","View","style","absoluteFill","opacity","backgroundColor","onBackgroundLight03","key","OS","enabled","styles","background","behavior","select","ios","default","pointerEvents","keyboardVerticalOffset","transform","panHandlers","isHideGesture","distanceY","velocityY","show","hide","create","onMoveShouldSetPanResponderCapture","_","_ref2","dy","onPanResponderGrant","setOffset","__getValue","onPanResponderMove","_ref3","setValue","onPanResponderRelease","_ref4","vy","current","initialY","get","baseAnimBackground","Value","baseAnimContent","interpolate","inputRange","outputRange","createTransition","toValue","config","duration","useNativeDriver","parallel","timing","start","prevVisible","usePrevProp","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 ModalAnimationType = 'slide' | 'slide-no-gesture' | 'fade';\ntype Props = {\n  type?: ModalAnimationType;\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 = ({\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}: Props) => {\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      statusBarTranslucent={statusBarTranslucent}\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={Platform.OS === 'android' && enableKeyboardAvoid ? `${width}-${height}` : undefined}\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: ModalAnimationType,\n  translateY: Animated.Value,\n  show: () => void,\n  hide: () => void,\n) => {\n  if (type === 'fade' || type === 'slide-no-gesture') 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: ModalAnimationType) => {\n  const initialY = type === 'fade' ? 0 : Dimensions.get('window').height;\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 === 'fade' ? 0 : 1, 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/components/PressBox/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","Pressable","TouchableOpacity","isFunction","DEFAULT_LONG_PRESS_DELAY","PressBox","props","activeOpacity","createElement","PressBoxWithTouchableOpacity","PressBoxWithPressable","_ref","children","_extends","disabled","onPress","onLongPress","delayLongPress","state","_ref2","style","pressed","setPressed","onPressIn","onPressOut"],"sources":["index.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useState } from 'react';\nimport type { GestureResponderEvent, StyleProp, ViewProps, ViewStyle } from 'react-native';\nimport { Pressable, TouchableOpacity } from 'react-native';\n\nimport { isFunction } from '@sendbird/uikit-utils';\n\ntype PressBoxStateParams = {\n  pressed: boolean;\n};\n\ntype Props = {\n  onPress?: (event: GestureResponderEvent) => void;\n  onLongPress?: (event: GestureResponderEvent) => void;\n  delayLongPress?: number;\n  activeOpacity?: number;\n  style?: StyleProp<ViewStyle> | ((state: PressBoxStateParams) => StyleProp<ViewStyle>);\n  hitSlop?: ViewProps['hitSlop'];\n  children?: React.ReactNode | ((params: PressBoxStateParams) => React.ReactNode);\n};\n\nexport const DEFAULT_LONG_PRESS_DELAY = 350;\n\nconst PressBox = (props: Props) => {\n  if (props.activeOpacity && props.activeOpacity < 1) return <PressBoxWithTouchableOpacity {...props} />;\n  return <PressBoxWithPressable {...props} />;\n};\n\nconst PressBoxWithPressable = ({ children, ...props }: Props) => {\n  return (\n    <Pressable disabled={!props.onPress && !props.onLongPress} delayLongPress={DEFAULT_LONG_PRESS_DELAY} {...props}>\n      {(state) => (isFunction(children) ? children(state) : children)}\n    </Pressable>\n  );\n};\n\nconst PressBoxWithTouchableOpacity = ({ children, style, ...props }: Props) => {\n  const [pressed, setPressed] = useState(false);\n  const state: PressBoxStateParams = { pressed };\n  return (\n    <TouchableOpacity\n      disabled={!props.onPress && !props.onLongPress}\n      delayLongPress={DEFAULT_LONG_PRESS_DELAY}\n      style={isFunction(style) ? style(state) : style}\n      onPressIn={() => setPressed(true)}\n      onPressOut={() => setPressed(false)}\n      {...props}\n    >\n      {isFunction(children) ? children(state) : children}\n    </TouchableOpacity>\n  );\n};\n\nexport default PressBox;\n"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,OAAO;AAEhC,SAASC,SAAS,EAAEC,gBAAgB,QAAQ,cAAc;AAE1D,SAASC,UAAU,QAAQ,uBAAuB;AAgBlD,OAAO,MAAMC,wBAAwB,GAAG,GAAG;AAE3C,MAAMC,QAAQ,GAAIC,KAAY,IAAK;EACjC,IAAIA,KAAK,CAACC,aAAa,IAAID,KAAK,CAACC,aAAa,GAAG,CAAC,EAAE,oBAAOR,KAAA,CAAAS,aAAA,CAACC,4BAA4B,EAAKH,KAAK,CAAI;EACtG,oBAAOP,KAAA,CAAAS,aAAA,CAACE,qBAAqB,EAAKJ,KAAK,CAAI;AAC7C,CAAC;AAED,MAAMI,qBAAqB,GAAGC,IAAA,IAAmC;EAAA,IAAlC;IAAEC,QAAQ;IAAE,GAAGN;EAAa,CAAC,GAAAK,IAAA;EAC1D,oBACEZ,KAAA,CAAAS,aAAA,CAACP,SAAS,EAAAY,QAAA;IAACC,QAAQ,EAAE,CAACR,KAAK,CAACS,OAAO,IAAI,CAACT,KAAK,CAACU,WAAY;IAACC,cAAc,EAAEb;EAAyB,GAAKE,KAAK,GAC1GY,KAAK,IAAMf,UAAU,CAACS,QAAQ,CAAC,GAAGA,QAAQ,CAACM,KAAK,CAAC,GAAGN,QAAS,CACrD;AAEhB,CAAC;AAED,MAAMH,4BAA4B,GAAGU,KAAA,IAA0C;EAAA,IAAzC;IAAEP,QAAQ;IAAEQ,KAAK;IAAE,GAAGd;EAAa,CAAC,GAAAa,KAAA;EACxE,MAAM,CAACE,OAAO,EAAEC,UAAU,CAAC,GAAGtB,QAAQ,CAAC,KAAK,CAAC;EAC7C,MAAMkB,KAA0B,GAAG;IAAEG;EAAQ,CAAC;EAC9C,oBACEtB,KAAA,CAAAS,aAAA,CAACN,gBAAgB,EAAAW,QAAA;IACfC,QAAQ,EAAE,CAACR,KAAK,CAACS,OAAO,IAAI,CAACT,KAAK,CAACU,WAAY;IAC/CC,cAAc,EAAEb,wBAAyB;IACzCgB,KAAK,EAAEjB,UAAU,CAACiB,KAAK,CAAC,GAAGA,KAAK,CAACF,KAAK,CAAC,GAAGE,KAAM;IAChDG,SAAS,EAAEA,CAAA,KAAMD,UAAU,CAAC,IAAI,CAAE;IAClCE,UAAU,EAAEA,CAAA,KAAMF,UAAU,CAAC,KAAK;EAAE,GAChChB,KAAK,GAERH,UAAU,CAACS,QAAQ,CAAC,GAAGA,QAAQ,CAACM,KAAK,CAAC,GAAGN,QAAQ,CACjC;AAEvB,CAAC;AAED,eAAeP,QAAQ"}
+{"version":3,"names":["React","useState","Pressable","TouchableOpacity","isFunction","DEFAULT_LONG_PRESS_DELAY","PressBox","props","activeOpacity","createElement","PressBoxWithTouchableOpacity","PressBoxWithPressable","_ref","children","_extends","disabled","onPress","onLongPress","delayLongPress","state","_ref2","style","pressed","setPressed","onPressIn","onPressOut"],"sources":["index.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useState } from 'react';\nimport type { GestureResponderEvent, StyleProp, ViewProps, ViewStyle } from 'react-native';\nimport { Pressable, TouchableOpacity } from 'react-native';\n\nimport { isFunction } from '@sendbird/uikit-utils';\n\ntype PressBoxStateParams = {\n  pressed: boolean;\n};\n\ntype Props = {\n  disabled?: boolean;\n  onPress?: (event: GestureResponderEvent) => void;\n  onLongPress?: (event: GestureResponderEvent) => void;\n  delayLongPress?: number;\n  activeOpacity?: number;\n  style?: StyleProp<ViewStyle> | ((state: PressBoxStateParams) => StyleProp<ViewStyle>);\n  hitSlop?: ViewProps['hitSlop'];\n  children?: React.ReactNode | ((params: PressBoxStateParams) => React.ReactNode);\n};\n\nexport const DEFAULT_LONG_PRESS_DELAY = 350;\n\nconst PressBox = (props: Props) => {\n  if (props.activeOpacity && props.activeOpacity < 1) return <PressBoxWithTouchableOpacity {...props} />;\n  return <PressBoxWithPressable {...props} />;\n};\n\nconst PressBoxWithPressable = ({ children, ...props }: Props) => {\n  return (\n    <Pressable disabled={!props.onPress && !props.onLongPress} delayLongPress={DEFAULT_LONG_PRESS_DELAY} {...props}>\n      {(state) => (isFunction(children) ? children(state) : children)}\n    </Pressable>\n  );\n};\n\nconst PressBoxWithTouchableOpacity = ({ children, style, ...props }: Props) => {\n  const [pressed, setPressed] = useState(false);\n  const state: PressBoxStateParams = { pressed };\n  return (\n    <TouchableOpacity\n      disabled={!props.onPress && !props.onLongPress}\n      delayLongPress={DEFAULT_LONG_PRESS_DELAY}\n      style={isFunction(style) ? style(state) : style}\n      onPressIn={() => setPressed(true)}\n      onPressOut={() => setPressed(false)}\n      {...props}\n    >\n      {isFunction(children) ? children(state) : children}\n    </TouchableOpacity>\n  );\n};\n\nexport default PressBox;\n"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,OAAO;AAEhC,SAASC,SAAS,EAAEC,gBAAgB,QAAQ,cAAc;AAE1D,SAASC,UAAU,QAAQ,uBAAuB;AAiBlD,OAAO,MAAMC,wBAAwB,GAAG,GAAG;AAE3C,MAAMC,QAAQ,GAAIC,KAAY,IAAK;EACjC,IAAIA,KAAK,CAACC,aAAa,IAAID,KAAK,CAACC,aAAa,GAAG,CAAC,EAAE,oBAAOR,KAAA,CAAAS,aAAA,CAACC,4BAA4B,EAAKH,KAAK,CAAI;EACtG,oBAAOP,KAAA,CAAAS,aAAA,CAACE,qBAAqB,EAAKJ,KAAK,CAAI;AAC7C,CAAC;AAED,MAAMI,qBAAqB,GAAGC,IAAA,IAAmC;EAAA,IAAlC;IAAEC,QAAQ;IAAE,GAAGN;EAAa,CAAC,GAAAK,IAAA;EAC1D,oBACEZ,KAAA,CAAAS,aAAA,CAACP,SAAS,EAAAY,QAAA;IAACC,QAAQ,EAAE,CAACR,KAAK,CAACS,OAAO,IAAI,CAACT,KAAK,CAACU,WAAY;IAACC,cAAc,EAAEb;EAAyB,GAAKE,KAAK,GAC1GY,KAAK,IAAMf,UAAU,CAACS,QAAQ,CAAC,GAAGA,QAAQ,CAACM,KAAK,CAAC,GAAGN,QAAS,CACrD;AAEhB,CAAC;AAED,MAAMH,4BAA4B,GAAGU,KAAA,IAA0C;EAAA,IAAzC;IAAEP,QAAQ;IAAEQ,KAAK;IAAE,GAAGd;EAAa,CAAC,GAAAa,KAAA;EACxE,MAAM,CAACE,OAAO,EAAEC,UAAU,CAAC,GAAGtB,QAAQ,CAAC,KAAK,CAAC;EAC7C,MAAMkB,KAA0B,GAAG;IAAEG;EAAQ,CAAC;EAC9C,oBACEtB,KAAA,CAAAS,aAAA,CAACN,gBAAgB,EAAAW,QAAA;IACfC,QAAQ,EAAE,CAACR,KAAK,CAACS,OAAO,IAAI,CAACT,KAAK,CAACU,WAAY;IAC/CC,cAAc,EAAEb,wBAAyB;IACzCgB,KAAK,EAAEjB,UAAU,CAACiB,KAAK,CAAC,GAAGA,KAAK,CAACF,KAAK,CAAC,GAAGE,KAAM;IAChDG,SAAS,EAAEA,CAAA,KAAMD,UAAU,CAAC,IAAI,CAAE;IAClCE,UAAU,EAAEA,CAAA,KAAMF,UAAU,CAAC,KAAK;EAAE,GAChChB,KAAK,GAERH,UAAU,CAACS,QAAQ,CAAC,GAAGA,QAAQ,CAACM,KAAK,CAAC,GAAGN,QAAQ,CACjC;AAEvB,CAAC;AAED,eAAeP,QAAQ"}

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

@@ -0,0 +1,62 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, Easing, StyleSheet } from 'react-native';
+import { NOOP } from '@sendbird/uikit-utils';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import Box from '../Box';
+const ProgressBar = _ref => {
+  let {
+    current = 100,
+    total = 100,
+    trackColor,
+    barColor,
+    overlay,
+    style
+  } = _ref;
+  const {
+    colors
+  } = useUIKitTheme();
+  const uiColors = {
+    track: trackColor ?? colors.primary,
+    bar: barColor ?? colors.onBackground01
+  };
+  const progress = useRef(new Animated.Value(0)).current;
+  const percent = current / total;
+  const stopped = percent === 0;
+  useEffect(() => {
+    if (!Number.isNaN(percent)) {
+      const animation = Animated.timing(progress, {
+        toValue: stopped ? 0 : percent,
+        duration: stopped ? 0 : 100,
+        useNativeDriver: false,
+        easing: Easing.linear
+      });
+      animation.start();
+      return () => animation.stop();
+    }
+    return NOOP;
+  }, [percent]);
+  return /*#__PURE__*/React.createElement(Box, {
+    height: 36,
+    flexDirection: 'row',
+    backgroundColor: uiColors.track,
+    alignItems: 'center',
+    overflow: 'hidden',
+    style: style
+  }, /*#__PURE__*/React.createElement(Animated.View, {
+    style: {
+      position: 'absolute',
+      width: progress.interpolate({
+        inputRange: [0, 1],
+        outputRange: ['0%', '100%'],
+        extrapolate: 'clamp'
+      }),
+      height: '100%',
+      opacity: 0.38,
+      backgroundColor: uiColors.bar
+    }
+  }), /*#__PURE__*/React.createElement(Box, {
+    style: StyleSheet.absoluteFill
+  }, overlay));
+};
+export default ProgressBar;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","useRef","Animated","Easing","StyleSheet","NOOP","useUIKitTheme","Box","ProgressBar","_ref","current","total","trackColor","barColor","overlay","style","colors","uiColors","track","primary","bar","onBackground01","progress","Value","percent","stopped","Number","isNaN","animation","timing","toValue","duration","useNativeDriver","easing","linear","start","stop","createElement","height","flexDirection","backgroundColor","alignItems","overflow","View","position","width","interpolate","inputRange","outputRange","extrapolate","opacity","absoluteFill"],"sources":["index.tsx"],"sourcesContent":["import React, { ReactNode, useEffect, useRef } from 'react';\nimport { Animated, Easing, StyleSheet, ViewStyle } from 'react-native';\n\nimport { NOOP } from '@sendbird/uikit-utils';\n\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Box from '../Box';\n\ntype Props = {\n  current: number;\n  total: number;\n  trackColor?: string;\n  barColor?: string;\n  overlay?: ReactNode | undefined;\n  style?: ViewStyle;\n};\nconst ProgressBar = ({ current = 100, total = 100, trackColor, barColor, overlay, style }: Props) => {\n  const { colors } = useUIKitTheme();\n\n  const uiColors = {\n    track: trackColor ?? colors.primary,\n    bar: barColor ?? colors.onBackground01,\n  };\n\n  const progress = useRef(new Animated.Value(0)).current;\n  const percent = current / total;\n  const stopped = percent === 0;\n\n  useEffect(() => {\n    if (!Number.isNaN(percent)) {\n      const animation = Animated.timing(progress, {\n        toValue: stopped ? 0 : percent,\n        duration: stopped ? 0 : 100,\n        useNativeDriver: false,\n        easing: Easing.linear,\n      });\n\n      animation.start();\n      return () => animation.stop();\n    }\n\n    return NOOP;\n  }, [percent]);\n\n  return (\n    <Box\n      height={36}\n      flexDirection={'row'}\n      backgroundColor={uiColors.track}\n      alignItems={'center'}\n      overflow={'hidden'}\n      style={style}\n    >\n      <Animated.View\n        style={{\n          position: 'absolute',\n          width: progress.interpolate({\n            inputRange: [0, 1],\n            outputRange: ['0%', '100%'],\n            extrapolate: 'clamp',\n          }),\n          height: '100%',\n          opacity: 0.38,\n          backgroundColor: uiColors.bar,\n        }}\n      />\n      <Box style={StyleSheet.absoluteFill}>{overlay}</Box>\n    </Box>\n  );\n};\n\nexport default ProgressBar;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAeC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AAC3D,SAASC,QAAQ,EAAEC,MAAM,EAAEC,UAAU,QAAmB,cAAc;AAEtE,SAASC,IAAI,QAAQ,uBAAuB;AAE5C,OAAOC,aAAa,MAAM,2BAA2B;AACrD,OAAOC,GAAG,MAAM,QAAQ;AAUxB,MAAMC,WAAW,GAAGC,IAAA,IAAiF;EAAA,IAAhF;IAAEC,OAAO,GAAG,GAAG;IAAEC,KAAK,GAAG,GAAG;IAAEC,UAAU;IAAEC,QAAQ;IAAEC,OAAO;IAAEC;EAAa,CAAC,GAAAN,IAAA;EAC9F,MAAM;IAAEO;EAAO,CAAC,GAAGV,aAAa,EAAE;EAElC,MAAMW,QAAQ,GAAG;IACfC,KAAK,EAAEN,UAAU,IAAII,MAAM,CAACG,OAAO;IACnCC,GAAG,EAAEP,QAAQ,IAAIG,MAAM,CAACK;EAC1B,CAAC;EAED,MAAMC,QAAQ,GAAGrB,MAAM,CAAC,IAAIC,QAAQ,CAACqB,KAAK,CAAC,CAAC,CAAC,CAAC,CAACb,OAAO;EACtD,MAAMc,OAAO,GAAGd,OAAO,GAAGC,KAAK;EAC/B,MAAMc,OAAO,GAAGD,OAAO,KAAK,CAAC;EAE7BxB,SAAS,CAAC,MAAM;IACd,IAAI,CAAC0B,MAAM,CAACC,KAAK,CAACH,OAAO,CAAC,EAAE;MAC1B,MAAMI,SAAS,GAAG1B,QAAQ,CAAC2B,MAAM,CAACP,QAAQ,EAAE;QAC1CQ,OAAO,EAAEL,OAAO,GAAG,CAAC,GAAGD,OAAO;QAC9BO,QAAQ,EAAEN,OAAO,GAAG,CAAC,GAAG,GAAG;QAC3BO,eAAe,EAAE,KAAK;QACtBC,MAAM,EAAE9B,MAAM,CAAC+B;MACjB,CAAC,CAAC;MAEFN,SAAS,CAACO,KAAK,EAAE;MACjB,OAAO,MAAMP,SAAS,CAACQ,IAAI,EAAE;IAC/B;IAEA,OAAO/B,IAAI;EACb,CAAC,EAAE,CAACmB,OAAO,CAAC,CAAC;EAEb,oBACEzB,KAAA,CAAAsC,aAAA,CAAC9B,GAAG;IACF+B,MAAM,EAAE,EAAG;IACXC,aAAa,EAAE,KAAM;IACrBC,eAAe,EAAEvB,QAAQ,CAACC,KAAM;IAChCuB,UAAU,EAAE,QAAS;IACrBC,QAAQ,EAAE,QAAS;IACnB3B,KAAK,EAAEA;EAAM,gBAEbhB,KAAA,CAAAsC,aAAA,CAACnC,QAAQ,CAACyC,IAAI;IACZ5B,KAAK,EAAE;MACL6B,QAAQ,EAAE,UAAU;MACpBC,KAAK,EAAEvB,QAAQ,CAACwB,WAAW,CAAC;QAC1BC,UAAU,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;QAClBC,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC;QAC3BC,WAAW,EAAE;MACf,CAAC,CAAC;MACFX,MAAM,EAAE,MAAM;MACdY,OAAO,EAAE,IAAI;MACbV,eAAe,EAAEvB,QAAQ,CAACG;IAC5B;EAAE,EACF,eACFrB,KAAA,CAAAsC,aAAA,CAAC9B,GAAG;IAACQ,KAAK,EAAEX,UAAU,CAAC+C;EAAa,GAAErC,OAAO,CAAO,CAChD;AAEV,CAAC;AAED,eAAeN,WAAW"}

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

@@ -1 +1 @@
-{"version":3,"names":["React","replaceWithRegex","Text","RegexText","_ref","children","patterns","props","length","createElement","Fragment","matchedTexts","forEach","_ref2","patterIndex","regex","replacer","matchedTextsTemp","concat","offset","text","index","params","parentProps","keyPrefix","String","splice"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\n\nimport { replaceWithRegex } from '@sendbird/uikit-utils';\n\nimport Text, { TextProps } from '../Text';\n\nexport interface RegexTextPattern {\n  regex: RegExp;\n  replacer(params: {\n    match: string;\n    groups: string[];\n    index: number;\n    keyPrefix: string;\n    parentProps?: TextProps;\n  }): string | JSX.Element;\n}\n\ntype Props = { patterns: RegexTextPattern[] } & TextProps;\n\nconst RegexText = ({ children, patterns, ...props }: Props) => {\n  if (patterns.length === 0 || typeof children !== 'string') return <>{children}</>;\n\n  const matchedTexts: Array<string | JSX.Element> = [children];\n\n  patterns.forEach(({ regex, replacer }, patterIndex) => {\n    const matchedTextsTemp = matchedTexts.concat();\n    let offset = 0;\n    matchedTextsTemp.forEach((text, index) => {\n      if (typeof text === 'string' && text) {\n        const children = replaceWithRegex(\n          text,\n          regex,\n          (params) => replacer({ ...params, parentProps: props, keyPrefix: index + params.keyPrefix }),\n          String(patterIndex),\n        );\n\n        if (children.length > 1) {\n          matchedTexts.splice(index + offset, 1, ...children);\n          offset += children.length - 1;\n        }\n      }\n    });\n  });\n\n  return <Text {...props}>{matchedTexts}</Text>;\n};\n\nexport default RegexText;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,gBAAgB,QAAQ,uBAAuB;AAExD,OAAOC,IAAI,MAAqB,SAAS;AAezC,MAAMC,SAAS,GAAGC,IAAA,IAA6C;EAAA,IAA5C;IAAEC,QAAQ;IAAEC,QAAQ;IAAE,GAAGC;EAAa,CAAC,GAAAH,IAAA;EACxD,IAAIE,QAAQ,CAACE,MAAM,KAAK,CAAC,IAAI,OAAOH,QAAQ,KAAK,QAAQ,EAAE,oBAAOL,KAAA,CAAAS,aAAA,CAAAT,KAAA,CAAAU,QAAA,QAAGL,QAAQ,CAAI;EAEjF,MAAMM,YAAyC,GAAG,CAACN,QAAQ,CAAC;EAE5DC,QAAQ,CAACM,OAAO,CAAC,CAAAC,KAAA,EAAsBC,WAAW,KAAK;IAAA,IAArC;MAAEC,KAAK;MAAEC;IAAS,CAAC,GAAAH,KAAA;IACnC,MAAMI,gBAAgB,GAAGN,YAAY,CAACO,MAAM,EAAE;IAC9C,IAAIC,MAAM,GAAG,CAAC;IACdF,gBAAgB,CAACL,OAAO,CAAC,CAACQ,IAAI,EAAEC,KAAK,KAAK;MACxC,IAAI,OAAOD,IAAI,KAAK,QAAQ,IAAIA,IAAI,EAAE;QACpC,MAAMf,QAAQ,GAAGJ,gBAAgB,CAC/BmB,IAAI,EACJL,KAAK,EACJO,MAAM,IAAKN,QAAQ,CAAC;UAAE,GAAGM,MAAM;UAAEC,WAAW,EAAEhB,KAAK;UAAEiB,SAAS,EAAEH,KAAK,GAAGC,MAAM,CAACE;QAAU,CAAC,CAAC,EAC5FC,MAAM,CAACX,WAAW,CAAC,CACpB;QAED,IAAIT,QAAQ,CAACG,MAAM,GAAG,CAAC,EAAE;UACvBG,YAAY,CAACe,MAAM,CAACL,KAAK,GAAGF,MAAM,EAAE,CAAC,EAAE,GAAGd,QAAQ,CAAC;UACnDc,MAAM,IAAId,QAAQ,CAACG,MAAM,GAAG,CAAC;QAC/B;MACF;IACF,CAAC,CAAC;EACJ,CAAC,CAAC;EAEF,oBAAOR,KAAA,CAAAS,aAAA,CAACP,IAAI,EAAKK,KAAK,EAAGI,YAAY,CAAQ;AAC/C,CAAC;AAED,eAAeR,SAAS"}
+{"version":3,"names":["React","replaceWithRegex","Text","RegexText","_ref","children","patterns","props","length","createElement","Fragment","matchedTexts","forEach","_ref2","patterIndex","regex","replacer","matchedTextsTemp","concat","offset","text","index","params","parentProps","keyPrefix","String","splice"],"sources":["index.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\n\nimport { replaceWithRegex } from '@sendbird/uikit-utils';\n\nimport Text, { TextProps } from '../Text';\n\nexport interface RegexTextPattern {\n  regex: RegExp;\n  replacer(params: {\n    match: string;\n    groups: string[];\n    index: number;\n    keyPrefix: string;\n    parentProps?: TextProps;\n  }): string | ReactNode;\n}\n\ntype Props = { patterns: RegexTextPattern[] } & TextProps;\n\nconst RegexText = ({ children, patterns, ...props }: Props) => {\n  if (patterns.length === 0 || typeof children !== 'string') return <>{children}</>;\n\n  const matchedTexts: Array<string | ReactNode> = [children];\n\n  patterns.forEach(({ regex, replacer }, patterIndex) => {\n    const matchedTextsTemp = matchedTexts.concat();\n    let offset = 0;\n    matchedTextsTemp.forEach((text, index) => {\n      if (typeof text === 'string' && text) {\n        const children = replaceWithRegex(\n          text,\n          regex,\n          (params) => replacer({ ...params, parentProps: props, keyPrefix: index + params.keyPrefix }),\n          String(patterIndex),\n        );\n\n        if (children.length > 1) {\n          matchedTexts.splice(index + offset, 1, ...children);\n          offset += children.length - 1;\n        }\n      }\n    });\n  });\n\n  return <Text {...props}>{matchedTexts}</Text>;\n};\n\nexport default RegexText;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAqB,OAAO;AAExC,SAASC,gBAAgB,QAAQ,uBAAuB;AAExD,OAAOC,IAAI,MAAqB,SAAS;AAezC,MAAMC,SAAS,GAAGC,IAAA,IAA6C;EAAA,IAA5C;IAAEC,QAAQ;IAAEC,QAAQ;IAAE,GAAGC;EAAa,CAAC,GAAAH,IAAA;EACxD,IAAIE,QAAQ,CAACE,MAAM,KAAK,CAAC,IAAI,OAAOH,QAAQ,KAAK,QAAQ,EAAE,oBAAOL,KAAA,CAAAS,aAAA,CAAAT,KAAA,CAAAU,QAAA,QAAGL,QAAQ,CAAI;EAEjF,MAAMM,YAAuC,GAAG,CAACN,QAAQ,CAAC;EAE1DC,QAAQ,CAACM,OAAO,CAAC,CAAAC,KAAA,EAAsBC,WAAW,KAAK;IAAA,IAArC;MAAEC,KAAK;MAAEC;IAAS,CAAC,GAAAH,KAAA;IACnC,MAAMI,gBAAgB,GAAGN,YAAY,CAACO,MAAM,EAAE;IAC9C,IAAIC,MAAM,GAAG,CAAC;IACdF,gBAAgB,CAACL,OAAO,CAAC,CAACQ,IAAI,EAAEC,KAAK,KAAK;MACxC,IAAI,OAAOD,IAAI,KAAK,QAAQ,IAAIA,IAAI,EAAE;QACpC,MAAMf,QAAQ,GAAGJ,gBAAgB,CAC/BmB,IAAI,EACJL,KAAK,EACJO,MAAM,IAAKN,QAAQ,CAAC;UAAE,GAAGM,MAAM;UAAEC,WAAW,EAAEhB,KAAK;UAAEiB,SAAS,EAAEH,KAAK,GAAGC,MAAM,CAACE;QAAU,CAAC,CAAC,EAC5FC,MAAM,CAACX,WAAW,CAAC,CACpB;QAED,IAAIT,QAAQ,CAACG,MAAM,GAAG,CAAC,EAAE;UACvBG,YAAY,CAACe,MAAM,CAACL,KAAK,GAAGF,MAAM,EAAE,CAAC,EAAE,GAAGd,QAAQ,CAAC;UACnDc,MAAM,IAAId,QAAQ,CAACG,MAAM,GAAG,CAAC;QAC/B;MACF;IACF,CAAC,CAAC;EACJ,CAAC,CAAC;EAEF,oBAAOR,KAAA,CAAAS,aAAA,CAACP,IAAI,EAAKK,KAAK,EAAGI,YAAY,CAAQ;AAC/C,CAAC;AAED,eAAeR,SAAS"}

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

@@ -21,12 +21,16 @@ const TextInput = /*#__PURE__*/React.forwardRef(function TextInput(_ref, ref) {
     borderBottomWidth: 2,
     borderBottomColor: inputStyle.highlight
   };
+  const fontStyle = {
+    ...typography.body3,
+    lineHeight: typography.body3.fontSize ? typography.body3.fontSize * 1.2 : undefined
+  };
   return /*#__PURE__*/React.createElement(RNTextInput, _extends({
     ref: ref,
     editable: editable,
     selectionColor: inputStyle.highlight,
     placeholderTextColor: inputStyle.placeholder,
-    style: [typography.body3, styles.input, {
+    style: [fontStyle, styles.input, {
       color: inputStyle.text,
       backgroundColor: inputStyle.background
     }, underlineStyle, style]
@@ -34,8 +38,11 @@ const TextInput = /*#__PURE__*/React.forwardRef(function TextInput(_ref, ref) {
 });
 const styles = createStyleSheet({
   input: {
-    paddingVertical: 8,
-    paddingHorizontal: 16
+    includeFontPadding: false,
+    paddingTop: 8,
+    paddingBottom: 8,
+    paddingLeft: 16,
+    paddingRight: 16
   }
 });
 export default TextInput;

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

@@ -1 +1 @@
-{"version":3,"names":["React","TextInput","RNTextInput","createStyleSheet","useUIKitTheme","forwardRef","_ref","ref","children","style","variant","editable","props","typography","colors","variantStyle","inputStyle","active","disabled","underlineStyle","borderBottomWidth","borderBottomColor","highlight","createElement","_extends","selectionColor","placeholderTextColor","placeholder","body3","styles","input","color","text","backgroundColor","background","paddingVertical","paddingHorizontal"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\nimport { TextInput as RNTextInput, TextInputProps } from 'react-native';\n\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport type { UIKitTheme } from '../../types';\n\ntype Props = { variant?: keyof UIKitTheme['colors']['ui']['input'] } & TextInputProps;\nconst TextInput = React.forwardRef<RNTextInput, Props>(function TextInput(\n  { children, style, variant = 'default', editable = true, ...props },\n  ref,\n) {\n  const { typography, colors } = useUIKitTheme();\n\n  const variantStyle = colors['ui']['input'][variant];\n  const inputStyle = editable ? variantStyle.active : variantStyle.disabled;\n  const underlineStyle = variant === 'underline' && { borderBottomWidth: 2, borderBottomColor: inputStyle.highlight };\n\n  return (\n    <RNTextInput\n      ref={ref}\n      editable={editable}\n      selectionColor={inputStyle.highlight}\n      placeholderTextColor={inputStyle.placeholder}\n      style={[\n        typography.body3,\n        styles.input,\n        { color: inputStyle.text, backgroundColor: inputStyle.background },\n        underlineStyle,\n        style,\n      ]}\n      {...props}\n    >\n      {children}\n    </RNTextInput>\n  );\n});\n\nconst styles = createStyleSheet({\n  input: {\n    paddingVertical: 8,\n    paddingHorizontal: 16,\n  },\n});\n\nexport default TextInput;\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,IAAIC,WAAW,QAAwB,cAAc;AAEvE,OAAOC,gBAAgB,MAAM,+BAA+B;AAC5D,OAAOC,aAAa,MAAM,2BAA2B;AAIrD,MAAMH,SAAS,gBAAGD,KAAK,CAACK,UAAU,CAAqB,SAASJ,SAASA,CAAAK,IAAA,EAEvEC,GAAG,EACH;EAAA,IAFA;IAAEC,QAAQ;IAAEC,KAAK;IAAEC,OAAO,GAAG,SAAS;IAAEC,QAAQ,GAAG,IAAI;IAAE,GAAGC;EAAM,CAAC,GAAAN,IAAA;EAGnE,MAAM;IAAEO,UAAU;IAAEC;EAAO,CAAC,GAAGV,aAAa,EAAE;EAE9C,MAAMW,YAAY,GAAGD,MAAM,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAACJ,OAAO,CAAC;EACnD,MAAMM,UAAU,GAAGL,QAAQ,GAAGI,YAAY,CAACE,MAAM,GAAGF,YAAY,CAACG,QAAQ;EACzE,MAAMC,cAAc,GAAGT,OAAO,KAAK,WAAW,IAAI;IAAEU,iBAAiB,EAAE,CAAC;IAAEC,iBAAiB,EAAEL,UAAU,CAACM;EAAU,CAAC;EAEnH,oBACEtB,KAAA,CAAAuB,aAAA,CAACrB,WAAW,EAAAsB,QAAA;IACVjB,GAAG,EAAEA,GAAI;IACTI,QAAQ,EAAEA,QAAS;IACnBc,cAAc,EAAET,UAAU,CAACM,SAAU;IACrCI,oBAAoB,EAAEV,UAAU,CAACW,WAAY;IAC7ClB,KAAK,EAAE,CACLI,UAAU,CAACe,KAAK,EAChBC,MAAM,CAACC,KAAK,EACZ;MAAEC,KAAK,EAAEf,UAAU,CAACgB,IAAI;MAAEC,eAAe,EAAEjB,UAAU,CAACkB;IAAW,CAAC,EAClEf,cAAc,EACdV,KAAK;EACL,GACEG,KAAK,GAERJ,QAAQ,CACG;AAElB,CAAC,CAAC;AAEF,MAAMqB,MAAM,GAAG1B,gBAAgB,CAAC;EAC9B2B,KAAK,EAAE;IACLK,eAAe,EAAE,CAAC;IAClBC,iBAAiB,EAAE;EACrB;AACF,CAAC,CAAC;AAEF,eAAenC,SAAS"}
+{"version":3,"names":["React","TextInput","RNTextInput","createStyleSheet","useUIKitTheme","forwardRef","_ref","ref","children","style","variant","editable","props","typography","colors","variantStyle","inputStyle","active","disabled","underlineStyle","borderBottomWidth","borderBottomColor","highlight","fontStyle","body3","lineHeight","fontSize","undefined","createElement","_extends","selectionColor","placeholderTextColor","placeholder","styles","input","color","text","backgroundColor","background","includeFontPadding","paddingTop","paddingBottom","paddingLeft","paddingRight"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\nimport { TextInput as RNTextInput, TextInputProps } from 'react-native';\n\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport type { UIKitTheme } from '../../types';\n\ntype Props = { variant?: keyof UIKitTheme['colors']['ui']['input'] } & TextInputProps;\nconst TextInput = React.forwardRef<RNTextInput, Props>(function TextInput(\n  { children, style, variant = 'default', editable = true, ...props },\n  ref,\n) {\n  const { typography, colors } = useUIKitTheme();\n\n  const variantStyle = colors['ui']['input'][variant];\n  const inputStyle = editable ? variantStyle.active : variantStyle.disabled;\n  const underlineStyle = variant === 'underline' && { borderBottomWidth: 2, borderBottomColor: inputStyle.highlight };\n  const fontStyle = {\n    ...typography.body3,\n    lineHeight: typography.body3.fontSize ? typography.body3.fontSize * 1.2 : undefined,\n  };\n\n  return (\n    <RNTextInput\n      ref={ref}\n      editable={editable}\n      selectionColor={inputStyle.highlight}\n      placeholderTextColor={inputStyle.placeholder}\n      style={[\n        fontStyle,\n        styles.input,\n        { color: inputStyle.text, backgroundColor: inputStyle.background },\n        underlineStyle,\n        style,\n      ]}\n      {...props}\n    >\n      {children}\n    </RNTextInput>\n  );\n});\n\nconst styles = createStyleSheet({\n  input: {\n    includeFontPadding: false,\n    paddingTop: 8,\n    paddingBottom: 8,\n    paddingLeft: 16,\n    paddingRight: 16,\n  },\n});\n\nexport default TextInput;\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,IAAIC,WAAW,QAAwB,cAAc;AAEvE,OAAOC,gBAAgB,MAAM,+BAA+B;AAC5D,OAAOC,aAAa,MAAM,2BAA2B;AAIrD,MAAMH,SAAS,gBAAGD,KAAK,CAACK,UAAU,CAAqB,SAASJ,SAASA,CAAAK,IAAA,EAEvEC,GAAG,EACH;EAAA,IAFA;IAAEC,QAAQ;IAAEC,KAAK;IAAEC,OAAO,GAAG,SAAS;IAAEC,QAAQ,GAAG,IAAI;IAAE,GAAGC;EAAM,CAAC,GAAAN,IAAA;EAGnE,MAAM;IAAEO,UAAU;IAAEC;EAAO,CAAC,GAAGV,aAAa,EAAE;EAE9C,MAAMW,YAAY,GAAGD,MAAM,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAACJ,OAAO,CAAC;EACnD,MAAMM,UAAU,GAAGL,QAAQ,GAAGI,YAAY,CAACE,MAAM,GAAGF,YAAY,CAACG,QAAQ;EACzE,MAAMC,cAAc,GAAGT,OAAO,KAAK,WAAW,IAAI;IAAEU,iBAAiB,EAAE,CAAC;IAAEC,iBAAiB,EAAEL,UAAU,CAACM;EAAU,CAAC;EACnH,MAAMC,SAAS,GAAG;IAChB,GAAGV,UAAU,CAACW,KAAK;IACnBC,UAAU,EAAEZ,UAAU,CAACW,KAAK,CAACE,QAAQ,GAAGb,UAAU,CAACW,KAAK,CAACE,QAAQ,GAAG,GAAG,GAAGC;EAC5E,CAAC;EAED,oBACE3B,KAAA,CAAA4B,aAAA,CAAC1B,WAAW,EAAA2B,QAAA;IACVtB,GAAG,EAAEA,GAAI;IACTI,QAAQ,EAAEA,QAAS;IACnBmB,cAAc,EAAEd,UAAU,CAACM,SAAU;IACrCS,oBAAoB,EAAEf,UAAU,CAACgB,WAAY;IAC7CvB,KAAK,EAAE,CACLc,SAAS,EACTU,MAAM,CAACC,KAAK,EACZ;MAAEC,KAAK,EAAEnB,UAAU,CAACoB,IAAI;MAAEC,eAAe,EAAErB,UAAU,CAACsB;IAAW,CAAC,EAClEnB,cAAc,EACdV,KAAK;EACL,GACEG,KAAK,GAERJ,QAAQ,CACG;AAElB,CAAC,CAAC;AAEF,MAAMyB,MAAM,GAAG9B,gBAAgB,CAAC;EAC9B+B,KAAK,EAAE;IACLK,kBAAkB,EAAE,KAAK;IACzBC,UAAU,EAAE,CAAC;IACbC,aAAa,EAAE,CAAC;IAChBC,WAAW,EAAE,EAAE;IACfC,YAAY,EAAE;EAChB;AACF,CAAC,CAAC;AAEF,eAAe1C,SAAS"}

package/lib/module/index.js

@@ -9,6 +9,7 @@ export { default as Image } from './components/Image';
 export { default as ImageWithPlaceholder } from './components/ImageWithPlaceholder';
 export { default as Modal } from './components/Modal';
 export { default as PressBox } from './components/PressBox';
+export { default as ProgressBar } from './components/ProgressBar';
 export { default as RegexText } from './components/RegexText';
 export { default as Switch } from './components/Switch';
 export { default as Text } from './components/Text';
@@ -24,11 +25,11 @@ export { default as BottomSheet } from './ui/BottomSheet';
 export { default as Button } from './ui/Button';
 export { default as ChannelFrozenBanner } from './ui/ChannelFrozenBanner';
 export { DialogProvider, useActionMenu, useAlert, usePrompt, useBottomSheet } from './ui/Dialog';
+export { default as GroupChannelMessage } from './ui/GroupChannelMessage';
+export { default as GroupChannelPreview } from './ui/GroupChannelPreview';
 export { default as Header } from './ui/Header';
 export { default as LoadingSpinner } from './ui/LoadingSpinner';
 export { default as MenuBar } from './ui/MenuBar';
-export { default as GroupChannelMessage } from './ui/GroupChannelMessage';
-export { default as GroupChannelPreview } from './ui/GroupChannelPreview';
 export { default as OpenChannelMessage } from './ui/OpenChannelMessage';
 export { default as OpenChannelPreview } from './ui/OpenChannelPreview';
 export { default as OutlinedButton } from './ui/OutlinedButton';
@@ -36,6 +37,7 @@ export { default as Placeholder } from './ui/Placeholder';
 export { default as ProfileCard } from './ui/ProfileCard';
 export { default as Prompt } from './ui/Prompt';
 export { default as Toast, useToast, ToastProvider } from './ui/Toast';
+export { default as TypingIndicatorBubble } from './ui/TypingIndicatorBubble';
 
 /** Styles **/
 export { default as createSelectByColorScheme } from './styles/createSelectByColorScheme';

package/lib/module/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["default","IconAssets","Box","Divider","Icon","Image","ImageWithPlaceholder","Modal","PressBox","RegexText","Switch","Text","TextInput","VideoThumbnail","ActionMenu","Alert","Avatar","Badge","BottomSheet","Button","ChannelFrozenBanner","DialogProvider","useActionMenu","useAlert","usePrompt","useBottomSheet","Header","LoadingSpinner","MenuBar","GroupChannelMessage","GroupChannelPreview","OpenChannelMessage","OpenChannelPreview","OutlinedButton","Placeholder","ProfileCard","Prompt","Toast","useToast","ToastProvider","createSelectByColorScheme","createScaleFactor","createStyleSheet","createTypography","getDefaultHeaderHeight","HeaderStyleContext","HeaderStyleProvider","useHeaderStyle","createTheme","DarkUIKitTheme","LightUIKitTheme","Palette","UIKitThemeContext","UIKitThemeProvider","useUIKitTheme"],"sources":["index.ts"],"sourcesContent":["/** Assets **/\nexport { default as IconAssets } from './assets/icon';\n\n/** Component **/\nexport { default as Box } from './components/Box';\nexport { default as Divider } from './components/Divider';\nexport { default as Icon } from './components/Icon';\nexport { default as Image } from './components/Image';\nexport { default as ImageWithPlaceholder } from './components/ImageWithPlaceholder';\nexport { default as Modal } from './components/Modal';\nexport { default as PressBox } from './components/PressBox';\nexport { default as RegexText } from './components/RegexText';\nexport type { RegexTextPattern } from './components/RegexText';\nexport { default as Switch } from './components/Switch';\nexport { default as Text } from './components/Text';\nexport { default as TextInput } from './components/TextInput';\nexport { VideoThumbnail } from './components/VideoThumbnail';\n\n/** UI **/\nexport { default as ActionMenu } from './ui/ActionMenu';\nexport { default as Alert } from './ui/Alert';\nexport { default as Avatar } from './ui/Avatar';\nexport { default as Badge } from './ui/Badge';\nexport { default as BottomSheet } from './ui/BottomSheet';\nexport { default as Button } from './ui/Button';\nexport { default as ChannelFrozenBanner } from './ui/ChannelFrozenBanner';\nexport { DialogProvider, useActionMenu, useAlert, usePrompt, useBottomSheet } from './ui/Dialog';\nexport { default as Header } from './ui/Header';\nexport { default as LoadingSpinner } from './ui/LoadingSpinner';\nexport { default as MenuBar } from './ui/MenuBar';\nexport type { MenuBarProps } from './ui/MenuBar';\nexport { default as GroupChannelMessage } from './ui/GroupChannelMessage';\nexport type { GroupChannelMessageProps } from './ui/GroupChannelMessage';\nexport { default as GroupChannelPreview } from './ui/GroupChannelPreview';\n\nexport { default as OpenChannelMessage } from './ui/OpenChannelMessage';\nexport type { OpenChannelMessageProps } from './ui/OpenChannelMessage';\nexport { default as OpenChannelPreview } from './ui/OpenChannelPreview';\nexport { default as OutlinedButton } from './ui/OutlinedButton';\nexport { default as Placeholder } from './ui/Placeholder';\nexport { default as ProfileCard } from './ui/ProfileCard';\nexport { default as Prompt } from './ui/Prompt';\nexport { default as Toast, useToast, ToastProvider } from './ui/Toast';\n\n/** Styles **/\nexport { default as createSelectByColorScheme } from './styles/createSelectByColorScheme';\nexport { default as createScaleFactor } from './styles/createScaleFactor';\nexport { default as createStyleSheet } from './styles/createStyleSheet';\nexport { default as createTypography } from './styles/createTypography';\nexport { default as getDefaultHeaderHeight } from './styles/getDefaultHeaderHeight';\nexport { HeaderStyleContext, HeaderStyleProvider } from './styles/HeaderStyleContext';\nexport { default as useHeaderStyle } from './styles/useHeaderStyle';\n\n/** Theme **/\nexport { default as createTheme } from './theme/createTheme';\nexport { default as DarkUIKitTheme } from './theme/DarkUIKitTheme';\nexport { default as LightUIKitTheme } from './theme/LightUIKitTheme';\nexport { default as Palette } from './theme/Palette';\nexport { default as UIKitThemeContext } from './theme/UIKitThemeContext';\nexport { default as UIKitThemeProvider } from './theme/UIKitThemeProvider';\nexport { default as useUIKitTheme } from './theme/useUIKitTheme';\n\n/** Types **/\nexport type {\n  TypoName,\n  UIKitTheme,\n  UIKitTypography,\n  FontAttributes,\n  BaseHeaderProps,\n  UIKitColorScheme,\n  UIKitColors,\n  ComponentColorTree,\n  UIKitPalette,\n  HeaderElement,\n  HeaderPartProps,\n  ComponentColors,\n  Component,\n  GetColorTree,\n} from './types';\nexport type { ActionMenuItem } from './ui/ActionMenu';\nexport type { BottomSheetItem } from './ui/BottomSheet';\nexport type { UIKitTypographyOverrides } from './styles/createTypography';\nexport type { HeaderStyleContextType } from './styles/HeaderStyleContext';\n"],"mappings":"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"}
+{"version":3,"names":["default","IconAssets","Box","Divider","Icon","Image","ImageWithPlaceholder","Modal","PressBox","ProgressBar","RegexText","Switch","Text","TextInput","VideoThumbnail","ActionMenu","Alert","Avatar","Badge","BottomSheet","Button","ChannelFrozenBanner","DialogProvider","useActionMenu","useAlert","usePrompt","useBottomSheet","GroupChannelMessage","GroupChannelPreview","Header","LoadingSpinner","MenuBar","OpenChannelMessage","OpenChannelPreview","OutlinedButton","Placeholder","ProfileCard","Prompt","Toast","useToast","ToastProvider","TypingIndicatorBubble","createSelectByColorScheme","createScaleFactor","createStyleSheet","createTypography","getDefaultHeaderHeight","HeaderStyleContext","HeaderStyleProvider","useHeaderStyle","createTheme","DarkUIKitTheme","LightUIKitTheme","Palette","UIKitThemeContext","UIKitThemeProvider","useUIKitTheme"],"sources":["index.ts"],"sourcesContent":["/** Assets **/\nexport { default as IconAssets } from './assets/icon';\n\n/** Component **/\nexport { default as Box } from './components/Box';\nexport { default as Divider } from './components/Divider';\nexport { default as Icon } from './components/Icon';\nexport { default as Image } from './components/Image';\nexport { default as ImageWithPlaceholder } from './components/ImageWithPlaceholder';\nexport { default as Modal } from './components/Modal';\nexport { default as PressBox } from './components/PressBox';\nexport { default as ProgressBar } from './components/ProgressBar';\nexport { default as RegexText } from './components/RegexText';\nexport type { RegexTextPattern } from './components/RegexText';\nexport { default as Switch } from './components/Switch';\nexport { default as Text } from './components/Text';\nexport { default as TextInput } from './components/TextInput';\nexport { VideoThumbnail } from './components/VideoThumbnail';\n\n/** UI **/\nexport { default as ActionMenu } from './ui/ActionMenu';\nexport { default as Alert } from './ui/Alert';\nexport { default as Avatar } from './ui/Avatar';\nexport { default as Badge } from './ui/Badge';\nexport { default as BottomSheet } from './ui/BottomSheet';\nexport { default as Button } from './ui/Button';\nexport { default as ChannelFrozenBanner } from './ui/ChannelFrozenBanner';\nexport { DialogProvider, useActionMenu, useAlert, usePrompt, useBottomSheet } from './ui/Dialog';\nexport { default as GroupChannelMessage } from './ui/GroupChannelMessage';\nexport type { GroupChannelMessageProps } from './ui/GroupChannelMessage';\nexport { default as GroupChannelPreview } from './ui/GroupChannelPreview';\nexport { default as Header } from './ui/Header';\nexport { default as LoadingSpinner } from './ui/LoadingSpinner';\nexport { default as MenuBar } from './ui/MenuBar';\nexport type { MenuBarProps } from './ui/MenuBar';\nexport { default as OpenChannelMessage } from './ui/OpenChannelMessage';\nexport type { OpenChannelMessageProps } from './ui/OpenChannelMessage';\nexport { default as OpenChannelPreview } from './ui/OpenChannelPreview';\nexport { default as OutlinedButton } from './ui/OutlinedButton';\nexport { default as Placeholder } from './ui/Placeholder';\nexport { default as ProfileCard } from './ui/ProfileCard';\nexport { default as Prompt } from './ui/Prompt';\nexport { default as Toast, useToast, ToastProvider } from './ui/Toast';\nexport { default as TypingIndicatorBubble } from './ui/TypingIndicatorBubble';\n\n/** Styles **/\nexport { default as createSelectByColorScheme } from './styles/createSelectByColorScheme';\nexport { default as createScaleFactor } from './styles/createScaleFactor';\nexport { default as createStyleSheet } from './styles/createStyleSheet';\nexport { default as createTypography } from './styles/createTypography';\nexport { default as getDefaultHeaderHeight } from './styles/getDefaultHeaderHeight';\nexport { HeaderStyleContext, HeaderStyleProvider } from './styles/HeaderStyleContext';\nexport { default as useHeaderStyle } from './styles/useHeaderStyle';\n\n/** Theme **/\nexport { default as createTheme } from './theme/createTheme';\nexport { default as DarkUIKitTheme } from './theme/DarkUIKitTheme';\nexport { default as LightUIKitTheme } from './theme/LightUIKitTheme';\nexport { default as Palette } from './theme/Palette';\nexport { default as UIKitThemeContext } from './theme/UIKitThemeContext';\nexport { default as UIKitThemeProvider } from './theme/UIKitThemeProvider';\nexport { default as useUIKitTheme } from './theme/useUIKitTheme';\n\n/** Types **/\nexport type {\n  TypoName,\n  UIKitTheme,\n  UIKitTypography,\n  FontAttributes,\n  BaseHeaderProps,\n  UIKitColorScheme,\n  UIKitColors,\n  ComponentColorTree,\n  UIKitPalette,\n  HeaderElement,\n  HeaderPartProps,\n  ComponentColors,\n  Component,\n  GetColorTree,\n} from './types';\nexport type { ActionMenuItem } from './ui/ActionMenu';\nexport type { BottomSheetItem } from './ui/BottomSheet';\nexport type { UIKitTypographyOverrides } from './styles/createTypography';\nexport type { HeaderStyleContextType } from './styles/HeaderStyleContext';\n"],"mappings":"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"}

package/lib/module/styles/HeaderStyleContext.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","StatusBar","useWindowDimensions","useSafeAreaInsets","getDefaultHeaderHeight","HeaderStyleContext","createContext","HeaderComponent","defaultTitleAlign","statusBarTranslucent","topInset","currentHeight","defaultHeight","HeaderStyleProvider","_ref","children","top","width","height","createElement","Provider","value"],"sources":["HeaderStyleContext.tsx"],"sourcesContent":["import React from 'react';\nimport { StatusBar, useWindowDimensions } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\nimport type { HeaderProps } from '../ui/Header';\nimport getDefaultHeaderHeight from './getDefaultHeaderHeight';\n\nexport type HeaderStyleContextType = {\n  HeaderComponent: (props: HeaderProps) => React.ReactElement | null;\n  defaultTitleAlign: 'left' | 'center';\n  statusBarTranslucent: boolean;\n  topInset: number;\n  defaultHeight: number;\n};\nexport const HeaderStyleContext = React.createContext<HeaderStyleContextType>({\n  HeaderComponent: () => null,\n  defaultTitleAlign: 'left',\n  statusBarTranslucent: true,\n  topInset: StatusBar.currentHeight ?? 0,\n  defaultHeight: getDefaultHeaderHeight(false),\n});\n\ntype Props = Pick<HeaderStyleContextType, 'statusBarTranslucent' | 'defaultTitleAlign' | 'HeaderComponent'>;\nexport const HeaderStyleProvider = ({\n  children,\n  HeaderComponent = () => null,\n  defaultTitleAlign,\n  statusBarTranslucent,\n}: React.PropsWithChildren<Props>) => {\n  const { top } = useSafeAreaInsets();\n  const { width, height } = useWindowDimensions();\n\n  return (\n    <HeaderStyleContext.Provider\n      value={{\n        HeaderComponent,\n        defaultTitleAlign,\n        statusBarTranslucent,\n        topInset: statusBarTranslucent ? top : 0,\n        defaultHeight: getDefaultHeaderHeight(width > height),\n      }}\n    >\n      {children}\n    </HeaderStyleContext.Provider>\n  );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,EAAEC,mBAAmB,QAAQ,cAAc;AAC7D,SAASC,iBAAiB,QAAQ,gCAAgC;AAGlE,OAAOC,sBAAsB,MAAM,0BAA0B;AAS7D,OAAO,MAAMC,kBAAkB,gBAAGL,KAAK,CAACM,aAAa,CAAyB;EAC5EC,eAAe,EAAEA,CAAA,KAAM,IAAI;EAC3BC,iBAAiB,EAAE,MAAM;EACzBC,oBAAoB,EAAE,IAAI;EAC1BC,QAAQ,EAAET,SAAS,CAACU,aAAa,IAAI,CAAC;EACtCC,aAAa,EAAER,sBAAsB,CAAC,KAAK;AAC7C,CAAC,CAAC;AAGF,OAAO,MAAMS,mBAAmB,GAAGC,IAAA,IAKG;EAAA,IALF;IAClCC,QAAQ;IACRR,eAAe,GAAGA,CAAA,KAAM,IAAI;IAC5BC,iBAAiB;IACjBC;EAC8B,CAAC,GAAAK,IAAA;EAC/B,MAAM;IAAEE;EAAI,CAAC,GAAGb,iBAAiB,EAAE;EACnC,MAAM;IAAEc,KAAK;IAAEC;EAAO,CAAC,GAAGhB,mBAAmB,EAAE;EAE/C,oBACEF,KAAA,CAAAmB,aAAA,CAACd,kBAAkB,CAACe,QAAQ;IAC1BC,KAAK,EAAE;MACLd,eAAe;MACfC,iBAAiB;MACjBC,oBAAoB;MACpBC,QAAQ,EAAED,oBAAoB,GAAGO,GAAG,GAAG,CAAC;MACxCJ,aAAa,EAAER,sBAAsB,CAACa,KAAK,GAAGC,MAAM;IACtD;EAAE,GAEDH,QAAQ,CACmB;AAElC,CAAC"}
+{"version":3,"names":["React","StatusBar","useWindowDimensions","useSafeAreaInsets","getDefaultHeaderHeight","HeaderStyleContext","createContext","HeaderComponent","defaultTitleAlign","statusBarTranslucent","topInset","currentHeight","defaultHeight","HeaderStyleProvider","_ref","children","top","width","height","createElement","Provider","value"],"sources":["HeaderStyleContext.tsx"],"sourcesContent":["import React from 'react';\nimport { StatusBar, useWindowDimensions } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\nimport type { HeaderProps } from '../ui/Header';\nimport getDefaultHeaderHeight from './getDefaultHeaderHeight';\n\nexport type HeaderStyleContextType = {\n  HeaderComponent: (props: HeaderProps) => React.ReactNode | null;\n  defaultTitleAlign: 'left' | 'center';\n  statusBarTranslucent: boolean;\n  topInset: number;\n  defaultHeight: number;\n};\nexport const HeaderStyleContext = React.createContext<HeaderStyleContextType>({\n  HeaderComponent: () => null,\n  defaultTitleAlign: 'left',\n  statusBarTranslucent: true,\n  topInset: StatusBar.currentHeight ?? 0,\n  defaultHeight: getDefaultHeaderHeight(false),\n});\n\ntype Props = Pick<HeaderStyleContextType, 'statusBarTranslucent' | 'defaultTitleAlign' | 'HeaderComponent'>;\nexport const HeaderStyleProvider = ({\n  children,\n  HeaderComponent = () => null,\n  defaultTitleAlign,\n  statusBarTranslucent,\n}: React.PropsWithChildren<Props>) => {\n  const { top } = useSafeAreaInsets();\n  const { width, height } = useWindowDimensions();\n\n  return (\n    <HeaderStyleContext.Provider\n      value={{\n        HeaderComponent,\n        defaultTitleAlign,\n        statusBarTranslucent,\n        topInset: statusBarTranslucent ? top : 0,\n        defaultHeight: getDefaultHeaderHeight(width > height),\n      }}\n    >\n      {children}\n    </HeaderStyleContext.Provider>\n  );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,EAAEC,mBAAmB,QAAQ,cAAc;AAC7D,SAASC,iBAAiB,QAAQ,gCAAgC;AAGlE,OAAOC,sBAAsB,MAAM,0BAA0B;AAS7D,OAAO,MAAMC,kBAAkB,gBAAGL,KAAK,CAACM,aAAa,CAAyB;EAC5EC,eAAe,EAAEA,CAAA,KAAM,IAAI;EAC3BC,iBAAiB,EAAE,MAAM;EACzBC,oBAAoB,EAAE,IAAI;EAC1BC,QAAQ,EAAET,SAAS,CAACU,aAAa,IAAI,CAAC;EACtCC,aAAa,EAAER,sBAAsB,CAAC,KAAK;AAC7C,CAAC,CAAC;AAGF,OAAO,MAAMS,mBAAmB,GAAGC,IAAA,IAKG;EAAA,IALF;IAClCC,QAAQ;IACRR,eAAe,GAAGA,CAAA,KAAM,IAAI;IAC5BC,iBAAiB;IACjBC;EAC8B,CAAC,GAAAK,IAAA;EAC/B,MAAM;IAAEE;EAAI,CAAC,GAAGb,iBAAiB,EAAE;EACnC,MAAM;IAAEc,KAAK;IAAEC;EAAO,CAAC,GAAGhB,mBAAmB,EAAE;EAE/C,oBACEF,KAAA,CAAAmB,aAAA,CAACd,kBAAkB,CAACe,QAAQ;IAC1BC,KAAK,EAAE;MACLd,eAAe;MACfC,iBAAiB;MACjBC,oBAAoB;MACpBC,QAAQ,EAAED,oBAAoB,GAAGO,GAAG,GAAG,CAAC;MACxCJ,aAAa,EAAER,sBAAsB,CAACa,KAAK,GAAGC,MAAM;IACtD;EAAE,GAEDH,QAAQ,CACmB;AAElC,CAAC"}

package/lib/module/styles/createScaleFactor.js

@@ -10,9 +10,10 @@ const createScaleFactor = function () {
   const rangedRatio = Math.min(Math.max(0.85, ratio), 1.25);
   return dp => PixelRatio.roundToNearestPixel(dp * rangedRatio);
 };
-createScaleFactor.updateScaleFactor = scaleFactor => {
-  DEFAULT_SCALE_FACTOR = scaleFactor;
-};
 export let DEFAULT_SCALE_FACTOR = createScaleFactor();
-export default createScaleFactor;
+export default Object.assign(createScaleFactor, {
+  updateScaleFactor: scaleFactor => {
+    DEFAULT_SCALE_FACTOR = scaleFactor;
+  }
+});
 //# sourceMappingURL=createScaleFactor.js.map

package/lib/module/styles/createScaleFactor.js.map

@@ -1 +1 @@
-{"version":3,"names":["Dimensions","PixelRatio","width","height","get","DESIGNED_DEVICE_WIDTH","createScaleFactor","deviceWidth","arguments","length","undefined","ratio","Math","min","rangedRatio","max","dp","roundToNearestPixel","updateScaleFactor","scaleFactor","DEFAULT_SCALE_FACTOR"],"sources":["createScaleFactor.ts"],"sourcesContent":["import { Dimensions, PixelRatio } from 'react-native';\n\nconst { width, height } = Dimensions.get('window');\n\nconst DESIGNED_DEVICE_WIDTH = 360;\n\nconst createScaleFactor = (deviceWidth = DESIGNED_DEVICE_WIDTH) => {\n  const ratio = Math.min(width, height) / deviceWidth;\n  const rangedRatio = Math.min(Math.max(0.85, ratio), 1.25);\n  return (dp: number) => PixelRatio.roundToNearestPixel(dp * rangedRatio);\n};\n\ncreateScaleFactor.updateScaleFactor = (scaleFactor: (dp: number) => number) => {\n  DEFAULT_SCALE_FACTOR = scaleFactor;\n};\n\nexport let DEFAULT_SCALE_FACTOR = createScaleFactor();\nexport default createScaleFactor;\n"],"mappings":"AAAA,SAASA,UAAU,EAAEC,UAAU,QAAQ,cAAc;AAErD,MAAM;EAAEC,KAAK;EAAEC;AAAO,CAAC,GAAGH,UAAU,CAACI,GAAG,CAAC,QAAQ,CAAC;AAElD,MAAMC,qBAAqB,GAAG,GAAG;AAEjC,MAAMC,iBAAiB,GAAG,SAAAA,CAAA,EAAyC;EAAA,IAAxCC,WAAW,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAGH,qBAAqB;EAC5D,MAAMM,KAAK,GAAGC,IAAI,CAACC,GAAG,CAACX,KAAK,EAAEC,MAAM,CAAC,GAAGI,WAAW;EACnD,MAAMO,WAAW,GAAGF,IAAI,CAACC,GAAG,CAACD,IAAI,CAACG,GAAG,CAAC,IAAI,EAAEJ,KAAK,CAAC,EAAE,IAAI,CAAC;EACzD,OAAQK,EAAU,IAAKf,UAAU,CAACgB,mBAAmB,CAACD,EAAE,GAAGF,WAAW,CAAC;AACzE,CAAC;AAEDR,iBAAiB,CAACY,iBAAiB,GAAIC,WAAmC,IAAK;EAC7EC,oBAAoB,GAAGD,WAAW;AACpC,CAAC;AAED,OAAO,IAAIC,oBAAoB,GAAGd,iBAAiB,EAAE;AACrD,eAAeA,iBAAiB"}
+{"version":3,"names":["Dimensions","PixelRatio","width","height","get","DESIGNED_DEVICE_WIDTH","createScaleFactor","deviceWidth","arguments","length","undefined","ratio","Math","min","rangedRatio","max","dp","roundToNearestPixel","DEFAULT_SCALE_FACTOR","Object","assign","updateScaleFactor","scaleFactor"],"sources":["createScaleFactor.ts"],"sourcesContent":["import { Dimensions, PixelRatio } from 'react-native';\n\nconst { width, height } = Dimensions.get('window');\n\nconst DESIGNED_DEVICE_WIDTH = 360;\n\nconst createScaleFactor = (deviceWidth = DESIGNED_DEVICE_WIDTH) => {\n  const ratio = Math.min(width, height) / deviceWidth;\n  const rangedRatio = Math.min(Math.max(0.85, ratio), 1.25);\n  return (dp: number) => PixelRatio.roundToNearestPixel(dp * rangedRatio);\n};\n\nexport let DEFAULT_SCALE_FACTOR = createScaleFactor();\nexport default Object.assign(createScaleFactor, {\n  updateScaleFactor: (scaleFactor: (dp: number) => number) => {\n    DEFAULT_SCALE_FACTOR = scaleFactor;\n  },\n});\n"],"mappings":"AAAA,SAASA,UAAU,EAAEC,UAAU,QAAQ,cAAc;AAErD,MAAM;EAAEC,KAAK;EAAEC;AAAO,CAAC,GAAGH,UAAU,CAACI,GAAG,CAAC,QAAQ,CAAC;AAElD,MAAMC,qBAAqB,GAAG,GAAG;AAEjC,MAAMC,iBAAiB,GAAG,SAAAA,CAAA,EAAyC;EAAA,IAAxCC,WAAW,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAGH,qBAAqB;EAC5D,MAAMM,KAAK,GAAGC,IAAI,CAACC,GAAG,CAACX,KAAK,EAAEC,MAAM,CAAC,GAAGI,WAAW;EACnD,MAAMO,WAAW,GAAGF,IAAI,CAACC,GAAG,CAACD,IAAI,CAACG,GAAG,CAAC,IAAI,EAAEJ,KAAK,CAAC,EAAE,IAAI,CAAC;EACzD,OAAQK,EAAU,IAAKf,UAAU,CAACgB,mBAAmB,CAACD,EAAE,GAAGF,WAAW,CAAC;AACzE,CAAC;AAED,OAAO,IAAII,oBAAoB,GAAGZ,iBAAiB,EAAE;AACrD,eAAea,MAAM,CAACC,MAAM,CAACd,iBAAiB,EAAE;EAC9Ce,iBAAiB,EAAGC,WAAmC,IAAK;IAC1DJ,oBAAoB,GAAGI,WAAW;EACpC;AACF,CAAC,CAAC"}

package/lib/module/styles/createStyleSheet.js

@@ -12,11 +12,15 @@ const preProcessor = {
   'height': SCALE_FACTOR_WITH_STR,
   'width': SCALE_FACTOR_WITH_STR,
   'padding': SCALE_FACTOR_WITH_STR,
+  'paddingVertical': SCALE_FACTOR_WITH_STR,
+  'paddingHorizontal': SCALE_FACTOR_WITH_STR,
   'paddingTop': SCALE_FACTOR_WITH_STR,
   'paddingBottom': SCALE_FACTOR_WITH_STR,
   'paddingLeft': SCALE_FACTOR_WITH_STR,
   'paddingRight': SCALE_FACTOR_WITH_STR,
   'margin': SCALE_FACTOR_WITH_STR,
+  'marginVertical': SCALE_FACTOR_WITH_STR,
+  'marginHorizontal': SCALE_FACTOR_WITH_STR,
   'marginTop': SCALE_FACTOR_WITH_STR,
   'marginBottom': SCALE_FACTOR_WITH_STR,
   'marginLeft': SCALE_FACTOR_WITH_STR,

package/lib/module/styles/createStyleSheet.js.map

@@ -1 +1 @@
-{"version":3,"names":["StyleSheet","DEFAULT_SCALE_FACTOR","SCALE_FACTOR_WITH_STR","val","preProcessor","preProcessorKeys","Object","keys","preProcessorLen","length","createStyleSheet","styles","values","forEach","style","styleKeys","styleLen","key","create"],"sources":["createStyleSheet.ts"],"sourcesContent":["import { ImageStyle, StyleSheet, TextStyle, ViewStyle } from 'react-native';\n\nimport { DEFAULT_SCALE_FACTOR } from './createScaleFactor';\n\ntype Styles = ViewStyle | TextStyle | ImageStyle;\ntype StylePreprocessor<T extends Styles = Styles> = { [key in keyof T]: (val: NonNullable<T[key]>) => typeof val };\n\nconst SCALE_FACTOR_WITH_STR = (val: string | number) => (typeof val === 'string' ? val : DEFAULT_SCALE_FACTOR(val));\n\nconst preProcessor: Partial<StylePreprocessor> = {\n  'fontSize': DEFAULT_SCALE_FACTOR,\n  'lineHeight': DEFAULT_SCALE_FACTOR,\n  'borderRadius': DEFAULT_SCALE_FACTOR,\n  'minWidth': SCALE_FACTOR_WITH_STR,\n  'maxWidth': SCALE_FACTOR_WITH_STR,\n  'minHeight': SCALE_FACTOR_WITH_STR,\n  'maxHeight': SCALE_FACTOR_WITH_STR,\n  'height': SCALE_FACTOR_WITH_STR,\n  'width': SCALE_FACTOR_WITH_STR,\n  'padding': SCALE_FACTOR_WITH_STR,\n  'paddingTop': SCALE_FACTOR_WITH_STR,\n  'paddingBottom': SCALE_FACTOR_WITH_STR,\n  'paddingLeft': SCALE_FACTOR_WITH_STR,\n  'paddingRight': SCALE_FACTOR_WITH_STR,\n  'margin': SCALE_FACTOR_WITH_STR,\n  'marginTop': SCALE_FACTOR_WITH_STR,\n  'marginBottom': SCALE_FACTOR_WITH_STR,\n  'marginLeft': SCALE_FACTOR_WITH_STR,\n  'marginRight': SCALE_FACTOR_WITH_STR,\n  'left': SCALE_FACTOR_WITH_STR,\n  'right': SCALE_FACTOR_WITH_STR,\n  'top': SCALE_FACTOR_WITH_STR,\n  'bottom': SCALE_FACTOR_WITH_STR,\n};\n\nconst preProcessorKeys = Object.keys(preProcessor);\nconst preProcessorLen = preProcessorKeys.length;\n\n/**\n * Create StyleSheet with customized pre-processor\n * Return a StyleSheet that pre-processed\n * @param styles\n * @returns StyleSheet\n * */\nconst createStyleSheet = <T extends StyleSheet.NamedStyles<T>>(styles: T | StyleSheet.NamedStyles<T>): T => {\n  Object.values(styles).forEach((style) => {\n    // @ts-ignore\n    const styleKeys = Object.keys(style);\n    const styleLen = styleKeys.length;\n\n    const keys = styleLen < preProcessorLen ? styleKeys : preProcessorKeys;\n    keys.forEach((key) => {\n      // @ts-ignore\n      if (preProcessor[key] && typeof style[key] !== 'undefined') style[key] = preProcessor[key](style[key]);\n    });\n  });\n\n  return StyleSheet.create<T>(styles);\n};\n\nexport default createStyleSheet;\n"],"mappings":"AAAA,SAAqBA,UAAU,QAA8B,cAAc;AAE3E,SAASC,oBAAoB,QAAQ,qBAAqB;AAK1D,MAAMC,qBAAqB,GAAIC,GAAoB,IAAM,OAAOA,GAAG,KAAK,QAAQ,GAAGA,GAAG,GAAGF,oBAAoB,CAACE,GAAG,CAAE;AAEnH,MAAMC,YAAwC,GAAG;EAC/C,UAAU,EAAEH,oBAAoB;EAChC,YAAY,EAAEA,oBAAoB;EAClC,cAAc,EAAEA,oBAAoB;EACpC,UAAU,EAAEC,qBAAqB;EACjC,UAAU,EAAEA,qBAAqB;EACjC,WAAW,EAAEA,qBAAqB;EAClC,WAAW,EAAEA,qBAAqB;EAClC,QAAQ,EAAEA,qBAAqB;EAC/B,OAAO,EAAEA,qBAAqB;EAC9B,SAAS,EAAEA,qBAAqB;EAChC,YAAY,EAAEA,qBAAqB;EACnC,eAAe,EAAEA,qBAAqB;EACtC,aAAa,EAAEA,qBAAqB;EACpC,cAAc,EAAEA,qBAAqB;EACrC,QAAQ,EAAEA,qBAAqB;EAC/B,WAAW,EAAEA,qBAAqB;EAClC,cAAc,EAAEA,qBAAqB;EACrC,YAAY,EAAEA,qBAAqB;EACnC,aAAa,EAAEA,qBAAqB;EACpC,MAAM,EAAEA,qBAAqB;EAC7B,OAAO,EAAEA,qBAAqB;EAC9B,KAAK,EAAEA,qBAAqB;EAC5B,QAAQ,EAAEA;AACZ,CAAC;AAED,MAAMG,gBAAgB,GAAGC,MAAM,CAACC,IAAI,CAACH,YAAY,CAAC;AAClD,MAAMI,eAAe,GAAGH,gBAAgB,CAACI,MAAM;;AAE/C;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,gBAAgB,GAAyCC,MAAqC,IAAQ;EAC1GL,MAAM,CAACM,MAAM,CAACD,MAAM,CAAC,CAACE,OAAO,CAAEC,KAAK,IAAK;IACvC;IACA,MAAMC,SAAS,GAAGT,MAAM,CAACC,IAAI,CAACO,KAAK,CAAC;IACpC,MAAME,QAAQ,GAAGD,SAAS,CAACN,MAAM;IAEjC,MAAMF,IAAI,GAAGS,QAAQ,GAAGR,eAAe,GAAGO,SAAS,GAAGV,gBAAgB;IACtEE,IAAI,CAACM,OAAO,CAAEI,GAAG,IAAK;MACpB;MACA,IAAIb,YAAY,CAACa,GAAG,CAAC,IAAI,OAAOH,KAAK,CAACG,GAAG,CAAC,KAAK,WAAW,EAAEH,KAAK,CAACG,GAAG,CAAC,GAAGb,YAAY,CAACa,GAAG,CAAC,CAACH,KAAK,CAACG,GAAG,CAAC,CAAC;IACxG,CAAC,CAAC;EACJ,CAAC,CAAC;EAEF,OAAOjB,UAAU,CAACkB,MAAM,CAAIP,MAAM,CAAC;AACrC,CAAC;AAED,eAAeD,gBAAgB"}
+{"version":3,"names":["StyleSheet","DEFAULT_SCALE_FACTOR","SCALE_FACTOR_WITH_STR","val","preProcessor","preProcessorKeys","Object","keys","preProcessorLen","length","createStyleSheet","styles","values","forEach","style","styleKeys","styleLen","key","create"],"sources":["createStyleSheet.ts"],"sourcesContent":["import { ImageStyle, StyleSheet, TextStyle, ViewStyle } from 'react-native';\n\nimport { DEFAULT_SCALE_FACTOR } from './createScaleFactor';\n\ntype Styles = ViewStyle | TextStyle | ImageStyle;\ntype StylePreprocessor<T extends Styles = Styles> = { [key in keyof T]: (val: NonNullable<T[key]>) => typeof val };\n\nconst SCALE_FACTOR_WITH_STR = (val: string | number) => (typeof val === 'string' ? val : DEFAULT_SCALE_FACTOR(val));\n\nconst preProcessor: Partial<StylePreprocessor> = {\n  'fontSize': DEFAULT_SCALE_FACTOR,\n  'lineHeight': DEFAULT_SCALE_FACTOR,\n  'borderRadius': DEFAULT_SCALE_FACTOR,\n  'minWidth': SCALE_FACTOR_WITH_STR,\n  'maxWidth': SCALE_FACTOR_WITH_STR,\n  'minHeight': SCALE_FACTOR_WITH_STR,\n  'maxHeight': SCALE_FACTOR_WITH_STR,\n  'height': SCALE_FACTOR_WITH_STR,\n  'width': SCALE_FACTOR_WITH_STR,\n  'padding': SCALE_FACTOR_WITH_STR,\n  'paddingVertical': SCALE_FACTOR_WITH_STR,\n  'paddingHorizontal': SCALE_FACTOR_WITH_STR,\n  'paddingTop': SCALE_FACTOR_WITH_STR,\n  'paddingBottom': SCALE_FACTOR_WITH_STR,\n  'paddingLeft': SCALE_FACTOR_WITH_STR,\n  'paddingRight': SCALE_FACTOR_WITH_STR,\n  'margin': SCALE_FACTOR_WITH_STR,\n  'marginVertical': SCALE_FACTOR_WITH_STR,\n  'marginHorizontal': SCALE_FACTOR_WITH_STR,\n  'marginTop': SCALE_FACTOR_WITH_STR,\n  'marginBottom': SCALE_FACTOR_WITH_STR,\n  'marginLeft': SCALE_FACTOR_WITH_STR,\n  'marginRight': SCALE_FACTOR_WITH_STR,\n  'left': SCALE_FACTOR_WITH_STR,\n  'right': SCALE_FACTOR_WITH_STR,\n  'top': SCALE_FACTOR_WITH_STR,\n  'bottom': SCALE_FACTOR_WITH_STR,\n};\n\nconst preProcessorKeys = Object.keys(preProcessor);\nconst preProcessorLen = preProcessorKeys.length;\n\n/**\n * Create StyleSheet with customized pre-processor\n * Return a StyleSheet that pre-processed\n * @param styles\n * @returns StyleSheet\n * */\nconst createStyleSheet = <T extends StyleSheet.NamedStyles<T>>(styles: T | StyleSheet.NamedStyles<T>): T => {\n  Object.values(styles).forEach((style) => {\n    // @ts-ignore\n    const styleKeys = Object.keys(style);\n    const styleLen = styleKeys.length;\n\n    const keys = styleLen < preProcessorLen ? styleKeys : preProcessorKeys;\n    keys.forEach((key) => {\n      // @ts-ignore\n      if (preProcessor[key] && typeof style[key] !== 'undefined') style[key] = preProcessor[key](style[key]);\n    });\n  });\n\n  return StyleSheet.create<T>(styles);\n};\n\nexport default createStyleSheet;\n"],"mappings":"AAAA,SAAqBA,UAAU,QAA8B,cAAc;AAE3E,SAASC,oBAAoB,QAAQ,qBAAqB;AAK1D,MAAMC,qBAAqB,GAAIC,GAAoB,IAAM,OAAOA,GAAG,KAAK,QAAQ,GAAGA,GAAG,GAAGF,oBAAoB,CAACE,GAAG,CAAE;AAEnH,MAAMC,YAAwC,GAAG;EAC/C,UAAU,EAAEH,oBAAoB;EAChC,YAAY,EAAEA,oBAAoB;EAClC,cAAc,EAAEA,oBAAoB;EACpC,UAAU,EAAEC,qBAAqB;EACjC,UAAU,EAAEA,qBAAqB;EACjC,WAAW,EAAEA,qBAAqB;EAClC,WAAW,EAAEA,qBAAqB;EAClC,QAAQ,EAAEA,qBAAqB;EAC/B,OAAO,EAAEA,qBAAqB;EAC9B,SAAS,EAAEA,qBAAqB;EAChC,iBAAiB,EAAEA,qBAAqB;EACxC,mBAAmB,EAAEA,qBAAqB;EAC1C,YAAY,EAAEA,qBAAqB;EACnC,eAAe,EAAEA,qBAAqB;EACtC,aAAa,EAAEA,qBAAqB;EACpC,cAAc,EAAEA,qBAAqB;EACrC,QAAQ,EAAEA,qBAAqB;EAC/B,gBAAgB,EAAEA,qBAAqB;EACvC,kBAAkB,EAAEA,qBAAqB;EACzC,WAAW,EAAEA,qBAAqB;EAClC,cAAc,EAAEA,qBAAqB;EACrC,YAAY,EAAEA,qBAAqB;EACnC,aAAa,EAAEA,qBAAqB;EACpC,MAAM,EAAEA,qBAAqB;EAC7B,OAAO,EAAEA,qBAAqB;EAC9B,KAAK,EAAEA,qBAAqB;EAC5B,QAAQ,EAAEA;AACZ,CAAC;AAED,MAAMG,gBAAgB,GAAGC,MAAM,CAACC,IAAI,CAACH,YAAY,CAAC;AAClD,MAAMI,eAAe,GAAGH,gBAAgB,CAACI,MAAM;;AAE/C;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,gBAAgB,GAAyCC,MAAqC,IAAQ;EAC1GL,MAAM,CAACM,MAAM,CAACD,MAAM,CAAC,CAACE,OAAO,CAAEC,KAAK,IAAK;IACvC;IACA,MAAMC,SAAS,GAAGT,MAAM,CAACC,IAAI,CAACO,KAAK,CAAC;IACpC,MAAME,QAAQ,GAAGD,SAAS,CAACN,MAAM;IAEjC,MAAMF,IAAI,GAAGS,QAAQ,GAAGR,eAAe,GAAGO,SAAS,GAAGV,gBAAgB;IACtEE,IAAI,CAACM,OAAO,CAAEI,GAAG,IAAK;MACpB;MACA,IAAIb,YAAY,CAACa,GAAG,CAAC,IAAI,OAAOH,KAAK,CAACG,GAAG,CAAC,KAAK,WAAW,EAAEH,KAAK,CAACG,GAAG,CAAC,GAAGb,YAAY,CAACa,GAAG,CAAC,CAACH,KAAK,CAACG,GAAG,CAAC,CAAC;IACxG,CAAC,CAAC;EACJ,CAAC,CAAC;EAEF,OAAOjB,UAAU,CAACkB,MAAM,CAAIP,MAAM,CAAC;AACrC,CAAC;AAED,eAAeD,gBAAgB"}

package/lib/module/theme/DarkUIKitTheme.js

@@ -2,40 +2,6 @@ import createTheme from './createTheme';
 const DarkUIKitTheme = createTheme({
   colorScheme: 'dark',
   colors: palette => {
-    const groupChannelMessage = {
-      incoming: {
-        enabled: {
-          textMsg: palette.onBackgroundDark01,
-          textEdited: palette.onBackgroundDark02,
-          textTime: palette.onBackgroundDark03,
-          textSenderName: palette.onBackgroundDark02,
-          background: palette.background400
-        },
-        pressed: {
-          textMsg: palette.onBackgroundDark01,
-          textEdited: palette.onBackgroundDark02,
-          textTime: palette.onBackgroundDark03,
-          textSenderName: palette.onBackgroundDark02,
-          background: palette.primary500
-        }
-      },
-      outgoing: {
-        enabled: {
-          textMsg: palette.onBackgroundLight01,
-          textEdited: palette.onBackgroundLight02,
-          textTime: palette.onBackgroundDark03,
-          textSenderName: palette.transparent,
-          background: palette.primary200
-        },
-        pressed: {
-          textMsg: palette.onBackgroundLight01,
-          textEdited: palette.onBackgroundLight02,
-          textTime: palette.onBackgroundDark03,
-          textSenderName: palette.transparent,
-          background: palette.primary300
-        }
-      }
-    };
     return {
       primary: palette.primary200,
       secondary: palette.secondary200,
@@ -147,7 +113,6 @@ const DarkUIKitTheme = createTheme({
             }
           }
         },
-        message: groupChannelMessage,
         dateSeparator: {
           default: {
             none: {
@@ -156,7 +121,60 @@ const DarkUIKitTheme = createTheme({
             }
           }
         },
-        groupChannelMessage,
+        groupChannelMessage: {
+          incoming: {
+            enabled: {
+              textMsg: palette.onBackgroundDark01,
+              textEdited: palette.onBackgroundDark02,
+              textTime: palette.onBackgroundDark03,
+              textSenderName: palette.onBackgroundDark02,
+              background: palette.background400,
+              textVoicePlaytime: palette.onBackgroundDark01,
+              voiceSpinner: palette.primary200,
+              voiceProgressTrack: palette.background400,
+              voiceActionIcon: palette.primary200,
+              voiceActionIconBackground: palette.background700
+            },
+            pressed: {
+              textMsg: palette.onBackgroundDark01,
+              textEdited: palette.onBackgroundDark02,
+              textTime: palette.onBackgroundDark03,
+              textSenderName: palette.onBackgroundDark02,
+              background: palette.primary500,
+              textVoicePlaytime: palette.onBackgroundDark01,
+              voiceSpinner: palette.primary200,
+              voiceProgressTrack: palette.background400,
+              voiceActionIcon: palette.primary200,
+              voiceActionIconBackground: palette.background700
+            }
+          },
+          outgoing: {
+            enabled: {
+              textMsg: palette.onBackgroundLight01,
+              textEdited: palette.onBackgroundLight02,
+              textTime: palette.onBackgroundDark03,
+              textSenderName: palette.transparent,
+              background: palette.primary200,
+              textVoicePlaytime: palette.onBackgroundLight01,
+              voiceSpinner: palette.primary300,
+              voiceProgressTrack: palette.primary200,
+              voiceActionIcon: palette.primary200,
+              voiceActionIconBackground: palette.background700
+            },
+            pressed: {
+              textMsg: palette.onBackgroundLight01,
+              textEdited: palette.onBackgroundLight02,
+              textTime: palette.onBackgroundDark03,
+              textSenderName: palette.transparent,
+              background: palette.primary300,
+              textVoicePlaytime: palette.onBackgroundLight01,
+              voiceSpinner: palette.primary300,
+              voiceProgressTrack: palette.primary200,
+              voiceActionIcon: palette.primary200,
+              voiceActionIconBackground: palette.background700
+            }
+          }
+        },
         groupChannelPreview: {
           default: {
             none: {
@@ -240,6 +258,32 @@ const DarkUIKitTheme = createTheme({
               separator: palette.onBackgroundDark04
             }
           }
+        },
+        voiceMessageInput: {
+          default: {
+            active: {
+              textCancel: palette.primary200,
+              textTime: palette.onBackgroundLight01,
+              background: palette.background600,
+              actionIcon: palette.onBackgroundDark01,
+              actionIconBackground: palette.background500,
+              sendIcon: palette.onBackgroundLight01,
+              sendIconBackground: palette.primary200,
+              progressTrack: palette.primary200,
+              recording: palette.error300
+            },
+            inactive: {
+              textCancel: palette.primary200,
+              textTime: palette.onBackgroundDark03,
+              background: palette.background600,
+              actionIcon: palette.onBackgroundDark01,
+              actionIconBackground: palette.background500,
+              sendIcon: palette.onBackgroundDark04,
+              sendIconBackground: palette.background500,
+              progressTrack: palette.background400,
+              recording: palette.error200
+            }
+          }
         }
       }
     };