@sendbird/uikit-react-native-foundation 3.7.6 → 3.8.0

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

@@ -8,15 +8,14 @@ import useHeaderStyle from '../../styles/useHeaderStyle';
 import useUIKitTheme from '../../theme/useUIKitTheme';
 import DialogBox from '../Dialog/DialogBox';
 import LoadingSpinner from '../LoadingSpinner';
-const ActionMenu = _ref => {
-  let {
-    visible,
-    onHide,
-    onError,
-    onDismiss,
-    title,
-    menuItems
-  } = _ref;
+const ActionMenu = ({
+  visible,
+  onHide,
+  onError,
+  onDismiss,
+  title,
+  menuItems
+}) => {
   const {
     statusBarTranslucent
   } = useHeaderStyle();
@@ -52,7 +51,7 @@ const ActionMenu = _ref => {
     color: colors.ui.dialog.default.none.highlight,
     style: {
       width: '10%',
-      marginLeft: '4%'
+      marginStart: '4%'
     }
   })), /*#__PURE__*/React.createElement(View, {
     style: styles.buttonContainer
@@ -69,7 +68,7 @@ const ActionMenu = _ref => {
           await ((_item$onPress = item.onPress) === null || _item$onPress === void 0 ? void 0 : _item$onPress.call(item));
         } catch (e) {
           const errorHandler = onError ?? item.onError;
-          errorHandler === null || errorHandler === void 0 ? void 0 : errorHandler(e);
+          errorHandler === null || errorHandler === void 0 || errorHandler(e);
           if (!errorHandler) Logger.error('ActionMenu onPress error', e);
         } finally {
           onHide();
@@ -88,9 +87,11 @@ const styles = createStyleSheet({
     flexDirection: 'row',
     paddingHorizontal: 24,
     paddingVertical: 20,
-    alignItems: 'center'
+    alignItems: 'center',
+    justifyContent: 'flex-start'
   },
   buttonContainer: {
+    alignItems: 'flex-start',
     marginTop: 4,
     marginBottom: 8
   },

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

@@ -1 +1 @@
-{"version":3,"names":["React","useState","TouchableOpacity","View","Logger","Modal","Text","createStyleSheet","useHeaderStyle","useUIKitTheme","DialogBox","LoadingSpinner","ActionMenu","_ref","visible","onHide","onError","onDismiss","title","menuItems","statusBarTranslucent","colors","pending","setPending","_onHide","createElement","onClose","backgroundStyle","alignItems","justifyContent","style","styles","h1","color","ui","dialog","default","none","text","numberOfLines","maxWidth","size","highlight","width","marginLeft","buttonContainer","map","item","index","activeOpacity","key","button","disabled","onPress","_item$onPress","call","e","errorHandler","error","subtitle2","destructive","flexDirection","paddingHorizontal","paddingVertical","marginTop","marginBottom"],"sources":["index.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { TouchableOpacity, View } from 'react-native';\n\nimport { Logger } from '@sendbird/uikit-utils';\n\nimport Modal from '../../components/Modal';\nimport Text from '../../components/Text';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useHeaderStyle from '../../styles/useHeaderStyle';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport DialogBox from '../Dialog/DialogBox';\nimport LoadingSpinner from '../LoadingSpinner';\n\nexport type ActionMenuItem = {\n  title?: string;\n  menuItems: {\n    title: string;\n    style?: 'destructive';\n    onPress?: (() => Promise<void>) | (() => void);\n    onError?: () => void;\n  }[];\n};\n\ntype Props = {\n  visible: boolean;\n  onHide: () => void;\n  onError?: (error: unknown) => void;\n  onDismiss?: () => void;\n} & ActionMenuItem;\nconst ActionMenu = ({ visible, onHide, onError, onDismiss, title, menuItems }: Props) => {\n  const { statusBarTranslucent } = useHeaderStyle();\n  const { colors } = useUIKitTheme();\n  const [pending, setPending] = useState(false);\n  const _onHide = () => {\n    if (!pending) onHide();\n  };\n\n  return (\n    <Modal\n      onClose={_onHide}\n      onDismiss={onDismiss}\n      statusBarTranslucent={statusBarTranslucent}\n      visible={visible}\n      backgroundStyle={{ alignItems: 'center', justifyContent: 'center' }}\n    >\n      <DialogBox>\n        <View style={styles.title}>\n          <Text\n            h1\n            color={colors.ui.dialog.default.none.text}\n            numberOfLines={1}\n            // style={{ flex: 1 }}\n            style={{ maxWidth: pending ? '86%' : '100%' }}\n          >\n            {title}\n          </Text>\n          {pending && (\n            <LoadingSpinner\n              size={20}\n              color={colors.ui.dialog.default.none.highlight}\n              style={{ width: '10%', marginLeft: '4%' }}\n            />\n          )}\n        </View>\n        <View style={styles.buttonContainer}>\n          {menuItems.map((item, index) => {\n            return (\n              <TouchableOpacity\n                activeOpacity={0.75}\n                key={item.title + index}\n                style={styles.button}\n                disabled={pending}\n                onPress={async () => {\n                  setPending(true);\n                  try {\n                    await item.onPress?.();\n                  } catch (e: unknown) {\n                    const errorHandler = onError ?? item.onError;\n                    errorHandler?.(e);\n                    if (!errorHandler) Logger.error('ActionMenu onPress error', e);\n                  } finally {\n                    onHide();\n                    setPending(false);\n                  }\n                }}\n              >\n                <Text\n                  subtitle2\n                  color={\n                    item.style === 'destructive'\n                      ? colors.ui.dialog.default.none.destructive\n                      : colors.ui.dialog.default.none.text\n                  }\n                  numberOfLines={1}\n                >\n                  {item.title}\n                </Text>\n              </TouchableOpacity>\n            );\n          })}\n        </View>\n      </DialogBox>\n    </Modal>\n  );\n};\n\nconst styles = createStyleSheet({\n  title: {\n    flexDirection: 'row',\n    paddingHorizontal: 24,\n    paddingVertical: 20,\n    alignItems: 'center',\n  },\n  buttonContainer: {\n    marginTop: 4,\n    marginBottom: 8,\n  },\n  button: {\n    paddingHorizontal: 24,\n    paddingVertical: 12,\n  },\n});\n\nexport default ActionMenu;\n"],"mappings":"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"}
+{"version":3,"names":["React","useState","TouchableOpacity","View","Logger","Modal","Text","createStyleSheet","useHeaderStyle","useUIKitTheme","DialogBox","LoadingSpinner","ActionMenu","visible","onHide","onError","onDismiss","title","menuItems","statusBarTranslucent","colors","pending","setPending","_onHide","createElement","onClose","backgroundStyle","alignItems","justifyContent","style","styles","h1","color","ui","dialog","default","none","text","numberOfLines","maxWidth","size","highlight","width","marginStart","buttonContainer","map","item","index","activeOpacity","key","button","disabled","onPress","_item$onPress","call","e","errorHandler","error","subtitle2","destructive","flexDirection","paddingHorizontal","paddingVertical","marginTop","marginBottom"],"sources":["index.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { TouchableOpacity, View } from 'react-native';\n\nimport { Logger } from '@sendbird/uikit-utils';\n\nimport Modal from '../../components/Modal';\nimport Text from '../../components/Text';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useHeaderStyle from '../../styles/useHeaderStyle';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport DialogBox from '../Dialog/DialogBox';\nimport LoadingSpinner from '../LoadingSpinner';\n\nexport type ActionMenuItem = {\n  title?: string;\n  menuItems: {\n    title: string;\n    style?: 'destructive';\n    onPress?: (() => Promise<void>) | (() => void);\n    onError?: () => void;\n  }[];\n};\n\ntype Props = {\n  visible: boolean;\n  onHide: () => void;\n  onError?: (error: unknown) => void;\n  onDismiss?: () => void;\n} & ActionMenuItem;\nconst ActionMenu = ({ visible, onHide, onError, onDismiss, title, menuItems }: Props) => {\n  const { statusBarTranslucent } = useHeaderStyle();\n  const { colors } = useUIKitTheme();\n  const [pending, setPending] = useState(false);\n  const _onHide = () => {\n    if (!pending) onHide();\n  };\n\n  return (\n    <Modal\n      onClose={_onHide}\n      onDismiss={onDismiss}\n      statusBarTranslucent={statusBarTranslucent}\n      visible={visible}\n      backgroundStyle={{ alignItems: 'center', justifyContent: 'center' }}\n    >\n      <DialogBox>\n        <View style={styles.title}>\n          <Text\n            h1\n            color={colors.ui.dialog.default.none.text}\n            numberOfLines={1}\n            // style={{ flex: 1 }}\n            style={{ maxWidth: pending ? '86%' : '100%' }}\n          >\n            {title}\n          </Text>\n          {pending && (\n            <LoadingSpinner\n              size={20}\n              color={colors.ui.dialog.default.none.highlight}\n              style={{ width: '10%', marginStart: '4%' }}\n            />\n          )}\n        </View>\n        <View style={styles.buttonContainer}>\n          {menuItems.map((item, index) => {\n            return (\n              <TouchableOpacity\n                activeOpacity={0.75}\n                key={item.title + index}\n                style={styles.button}\n                disabled={pending}\n                onPress={async () => {\n                  setPending(true);\n                  try {\n                    await item.onPress?.();\n                  } catch (e: unknown) {\n                    const errorHandler = onError ?? item.onError;\n                    errorHandler?.(e);\n                    if (!errorHandler) Logger.error('ActionMenu onPress error', e);\n                  } finally {\n                    onHide();\n                    setPending(false);\n                  }\n                }}\n              >\n                <Text\n                  subtitle2\n                  color={\n                    item.style === 'destructive'\n                      ? colors.ui.dialog.default.none.destructive\n                      : colors.ui.dialog.default.none.text\n                  }\n                  numberOfLines={1}\n                >\n                  {item.title}\n                </Text>\n              </TouchableOpacity>\n            );\n          })}\n        </View>\n      </DialogBox>\n    </Modal>\n  );\n};\n\nconst styles = createStyleSheet({\n  title: {\n    flexDirection: 'row',\n    paddingHorizontal: 24,\n    paddingVertical: 20,\n    alignItems: 'center',\n    justifyContent: 'flex-start',\n  },\n  buttonContainer: {\n    alignItems: 'flex-start',\n    marginTop: 4,\n    marginBottom: 8,\n  },\n  button: {\n    paddingHorizontal: 24,\n    paddingVertical: 12,\n  },\n});\n\nexport default ActionMenu;\n"],"mappings":"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","ignoreList":[]}

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

@@ -7,17 +7,16 @@ import useHeaderStyle from '../../styles/useHeaderStyle';
 import useUIKitTheme from '../../theme/useUIKitTheme';
 import Button from '../Button';
 import DialogBox from '../Dialog/DialogBox';
-const Alert = _ref => {
-  let {
-    onDismiss,
-    visible,
-    onHide,
-    title = '',
-    message = '',
-    buttons = [{
-      text: 'OK'
-    }]
-  } = _ref;
+const Alert = ({
+  onDismiss,
+  visible,
+  onHide,
+  title = '',
+  message = '',
+  buttons = [{
+    text: 'OK'
+  }]
+}) => {
   const {
     statusBarTranslucent
   } = useHeaderStyle();
@@ -40,10 +39,7 @@ const Alert = _ref => {
   }, /*#__PURE__*/React.createElement(Text, {
     h1: true,
     color: colors.ui.dialog.default.none.text,
-    numberOfLines: 1,
-    style: {
-      flex: 1
-    }
+    numberOfLines: 1
   }, title)), /*#__PURE__*/React.createElement(View, {
     style: styles.messageContainer
   }, Boolean(message) && /*#__PURE__*/React.createElement(Text, {
@@ -53,19 +49,18 @@ const Alert = _ref => {
     numberOfLines: 3
   }, message)), /*#__PURE__*/React.createElement(View, {
     style: styles.buttonContainer
-  }, buttons.map((_ref2, index) => {
-    let {
-      text = 'OK',
-      style = 'default',
-      onPress
-    } = _ref2;
+  }, buttons.map(({
+    text = 'OK',
+    style = 'default',
+    onPress
+  }, index) => {
     return /*#__PURE__*/React.createElement(Button, {
       key: text + index,
       variant: 'text',
       style: styles.button,
       onPress: async () => {
         try {
-          onPress === null || onPress === void 0 ? void 0 : onPress();
+          onPress === null || onPress === void 0 || onPress();
         } finally {
           onHide();
         }
@@ -81,15 +76,15 @@ const styles = createStyleSheet({
   titleContainer: {
     paddingBottom: 16,
     paddingHorizontal: 24,
-    flexDirection: 'row',
-    alignItems: 'center'
+    alignItems: 'flex-start'
   },
   messageContainer: {
     paddingHorizontal: 24,
-    marginBottom: 12
+    marginBottom: 12,
+    alignItems: 'flex-start'
   },
   button: {
-    marginLeft: 8
+    marginStart: 8
   },
   buttonContainer: {
     flexDirection: 'row',

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

@@ -1 +1 @@
-{"version":3,"names":["React","View","Modal","Text","createStyleSheet","useHeaderStyle","useUIKitTheme","Button","DialogBox","Alert","_ref","onDismiss","visible","onHide","title","message","buttons","text","statusBarTranslucent","colors","createElement","onClose","backgroundStyle","alignItems","justifyContent","style","styles","container","Boolean","titleContainer","h1","color","ui","dialog","default","none","numberOfLines","flex","messageContainer","subtitle2","body3","buttonContainer","map","_ref2","index","onPress","key","variant","button","contentColor","destructive","highlight","paddingTop","paddingBottom","paddingHorizontal","flexDirection","marginBottom","marginLeft","padding"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\nimport { AlertButton, View } from 'react-native';\n\nimport Modal from '../../components/Modal';\nimport Text from '../../components/Text';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useHeaderStyle from '../../styles/useHeaderStyle';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Button from '../Button';\nimport DialogBox from '../Dialog/DialogBox';\n\nexport type AlertItem = {\n  title?: string;\n  message?: string;\n  buttons?: AlertButton[];\n};\n\ntype Props = {\n  visible: boolean;\n  onHide: () => void;\n  onDismiss?: () => void;\n} & AlertItem;\nconst Alert = ({ onDismiss, visible, onHide, title = '', message = '', buttons = [{ text: 'OK' }] }: Props) => {\n  const { statusBarTranslucent } = useHeaderStyle();\n  const { colors } = useUIKitTheme();\n\n  return (\n    <Modal\n      onClose={onHide}\n      onDismiss={onDismiss}\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.messageContainer}>\n          {Boolean(message) && (\n            <Text\n              subtitle2={!title}\n              body3={Boolean(title)}\n              color={!title ? colors.ui.dialog.default.none.text : colors.ui.dialog.default.none.message}\n              numberOfLines={3}\n            >\n              {message}\n            </Text>\n          )}\n        </View>\n\n        <View style={styles.buttonContainer}>\n          {buttons.map(({ text = 'OK', style = 'default', onPress }, index) => {\n            return (\n              <Button\n                key={text + index}\n                variant={'text'}\n                style={styles.button}\n                onPress={async () => {\n                  try {\n                    onPress?.();\n                  } finally {\n                    onHide();\n                  }\n                }}\n                contentColor={\n                  style === 'destructive'\n                    ? colors.ui.dialog.default.none.destructive\n                    : colors.ui.dialog.default.none.highlight\n                }\n              >\n                {text}\n              </Button>\n            );\n          })}\n        </View>\n      </DialogBox>\n    </Modal>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    paddingTop: 20,\n  },\n  titleContainer: {\n    paddingBottom: 16,\n    paddingHorizontal: 24,\n    flexDirection: 'row',\n    alignItems: 'center',\n  },\n  messageContainer: {\n    paddingHorizontal: 24,\n    marginBottom: 12,\n  },\n  button: {\n    marginLeft: 8,\n  },\n  buttonContainer: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'flex-end',\n    padding: 12,\n  },\n});\n\nexport default Alert;\n"],"mappings":"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"}
+{"version":3,"names":["React","View","Modal","Text","createStyleSheet","useHeaderStyle","useUIKitTheme","Button","DialogBox","Alert","onDismiss","visible","onHide","title","message","buttons","text","statusBarTranslucent","colors","createElement","onClose","backgroundStyle","alignItems","justifyContent","style","styles","container","Boolean","titleContainer","h1","color","ui","dialog","default","none","numberOfLines","messageContainer","subtitle2","body3","buttonContainer","map","onPress","index","key","variant","button","contentColor","destructive","highlight","paddingTop","paddingBottom","paddingHorizontal","marginBottom","marginStart","flexDirection","padding"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\nimport { AlertButton, View } from 'react-native';\n\nimport Modal from '../../components/Modal';\nimport Text from '../../components/Text';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useHeaderStyle from '../../styles/useHeaderStyle';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Button from '../Button';\nimport DialogBox from '../Dialog/DialogBox';\n\nexport type AlertItem = {\n  title?: string;\n  message?: string;\n  buttons?: AlertButton[];\n};\n\ntype Props = {\n  visible: boolean;\n  onHide: () => void;\n  onDismiss?: () => void;\n} & AlertItem;\nconst Alert = ({ onDismiss, visible, onHide, title = '', message = '', buttons = [{ text: 'OK' }] }: Props) => {\n  const { statusBarTranslucent } = useHeaderStyle();\n  const { colors } = useUIKitTheme();\n\n  return (\n    <Modal\n      onClose={onHide}\n      onDismiss={onDismiss}\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}>\n              {title}\n            </Text>\n          </View>\n        )}\n\n        <View style={styles.messageContainer}>\n          {Boolean(message) && (\n            <Text\n              subtitle2={!title}\n              body3={Boolean(title)}\n              color={!title ? colors.ui.dialog.default.none.text : colors.ui.dialog.default.none.message}\n              numberOfLines={3}\n            >\n              {message}\n            </Text>\n          )}\n        </View>\n\n        <View style={styles.buttonContainer}>\n          {buttons.map(({ text = 'OK', style = 'default', onPress }, index) => {\n            return (\n              <Button\n                key={text + index}\n                variant={'text'}\n                style={styles.button}\n                onPress={async () => {\n                  try {\n                    onPress?.();\n                  } finally {\n                    onHide();\n                  }\n                }}\n                contentColor={\n                  style === 'destructive'\n                    ? colors.ui.dialog.default.none.destructive\n                    : colors.ui.dialog.default.none.highlight\n                }\n              >\n                {text}\n              </Button>\n            );\n          })}\n        </View>\n      </DialogBox>\n    </Modal>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    paddingTop: 20,\n  },\n  titleContainer: {\n    paddingBottom: 16,\n    paddingHorizontal: 24,\n    alignItems: 'flex-start',\n  },\n  messageContainer: {\n    paddingHorizontal: 24,\n    marginBottom: 12,\n    alignItems: 'flex-start',\n  },\n  button: {\n    marginStart: 8,\n  },\n  buttonContainer: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'flex-end',\n    padding: 12,\n  },\n});\n\nexport default Alert;\n"],"mappings":"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","ignoreList":[]}

package/lib/module/ui/Avatar/AvatarGroup.js

@@ -1,12 +1,11 @@
 import React from 'react';
 import { View } from 'react-native';
 const MAX = 4;
-const AvatarGroup = _ref => {
-  let {
-    children,
-    containerStyle,
-    size = 56
-  } = _ref;
+const AvatarGroup = ({
+  children,
+  containerStyle,
+  size = 56
+}) => {
   const childAmount = React.Children.count(children);
   if (childAmount === 0) {
     return /*#__PURE__*/React.createElement(View, {
@@ -29,17 +28,17 @@ const AvatarGroup = _ref => {
         containerStyle
       });
       const top = getTopPoint(index, childAmount) * size;
-      const left = getLeftPoint(index) * size;
+      const start = getStartPoint(index) * size;
       const width = getWidthPoint(index, childAmount) * size;
       const height = getHeightPoint(index, childAmount) * size;
-      const innerLeft = -getInnerLeft(index, childAmount) * size;
+      const innerStart = -getInnerStart(index, childAmount) * size;
       const innerTop = -getInnerTop(childAmount) * size;
       return /*#__PURE__*/React.createElement(View, {
         style: {
           overflow: 'hidden',
           position: 'absolute',
           top,
-          left,
+          start,
           width,
           height
         }
@@ -47,7 +46,7 @@ const AvatarGroup = _ref => {
         size,
         square: true,
         containerStyle: {
-          left: innerLeft,
+          start: innerStart,
           top: innerTop
         }
       }));
@@ -77,11 +76,11 @@ const getTopPoint = (idx, total) => {
   if (idx === 0 || idx === 1) return -0.025;
   return 0.525;
 };
-const getLeftPoint = idx => {
+const getStartPoint = idx => {
   if (idx === 0 || idx === 2) return -0.025;
   return 0.525;
 };
-const getInnerLeft = (idx, total) => {
+const getInnerStart = (idx, total) => {
   if (total === 3 && idx === 0) return 0;
   return 0.25;
 };

package/lib/module/ui/Avatar/AvatarGroup.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","MAX","AvatarGroup","_ref","children","containerStyle","size","childAmount","Children","count","createElement","style","overflow","width","height","borderRadius","backgroundColor","renderAvatars","_React$Children$map","map","child","index","isValidElement","cloneElement","top","getTopPoint","left","getLeftPoint","getWidthPoint","getHeightPoint","innerLeft","getInnerLeft","innerTop","getInnerTop","position","square","slice","_","total","idx"],"sources":["AvatarGroup.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { StyleProp, View, ViewStyle } from 'react-native';\n\nconst MAX = 4;\n\ntype Props = React.PropsWithChildren<{\n  size?: number;\n  containerStyle?: StyleProp<ViewStyle>;\n}>;\nconst AvatarGroup = ({ children, containerStyle, size = 56 }: Props) => {\n  const childAmount = React.Children.count(children);\n\n  if (childAmount === 0) {\n    return (\n      <View\n        style={[\n          containerStyle,\n          {\n            overflow: 'hidden',\n            width: size,\n            height: size,\n            borderRadius: size,\n            backgroundColor: 'rgba(120,120,120,0.2)',\n          },\n        ]}\n      />\n    );\n  }\n\n  const renderAvatars = () => {\n    return (\n      React.Children.map(children, (child, index) => {\n        if (index + 1 > MAX) return child;\n        if (!React.isValidElement(child)) return child;\n\n        if (childAmount === 1) return React.cloneElement(child as ReactElement, { size, containerStyle });\n\n        const top = getTopPoint(index, childAmount) * size;\n        const left = getLeftPoint(index) * size;\n        const width = getWidthPoint(index, childAmount) * size;\n        const height = getHeightPoint(index, childAmount) * size;\n        const innerLeft = -getInnerLeft(index, childAmount) * size;\n        const innerTop = -getInnerTop(childAmount) * size;\n\n        return (\n          <View style={{ overflow: 'hidden', position: 'absolute', top, left, width, height }}>\n            {React.cloneElement(child as ReactElement, {\n              size,\n              square: true,\n              containerStyle: { left: innerLeft, top: innerTop },\n            })}\n          </View>\n        );\n      })?.slice(0, 4) ?? []\n    );\n  };\n\n  return (\n    <View style={[containerStyle, { overflow: 'hidden', width: size, height: size, borderRadius: size }]}>\n      {renderAvatars()}\n    </View>\n  );\n};\n\nconst getHeightPoint = (_: number, total: number) => {\n  if (total === 2) return 1;\n  return 0.5;\n};\nconst getWidthPoint = (idx: number, total: number) => {\n  if (total === 3 && idx === 0) return 1;\n  return 0.5;\n};\nconst getTopPoint = (idx: number, total: number) => {\n  if (total === 2) return 0;\n  if (total === 3 && idx === 0) return -0.025;\n  if (total === 3 && idx !== 0) return 0.525;\n  if (idx === 0 || idx === 1) return -0.025;\n  return 0.525;\n};\nconst getLeftPoint = (idx: number) => {\n  if (idx === 0 || idx === 2) return -0.025;\n  return 0.525;\n};\nconst getInnerLeft = (idx: number, total: number) => {\n  if (total === 3 && idx === 0) return 0;\n  return 0.25;\n};\nconst getInnerTop = (total: number) => {\n  if (total === 2) return 0;\n  return 0.25;\n};\n\nexport default AvatarGroup;\n"],"mappings":"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"}
+{"version":3,"names":["React","View","MAX","AvatarGroup","children","containerStyle","size","childAmount","Children","count","createElement","style","overflow","width","height","borderRadius","backgroundColor","renderAvatars","_React$Children$map","map","child","index","isValidElement","cloneElement","top","getTopPoint","start","getStartPoint","getWidthPoint","getHeightPoint","innerStart","getInnerStart","innerTop","getInnerTop","position","square","slice","_","total","idx"],"sources":["AvatarGroup.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { StyleProp, View, ViewStyle } from 'react-native';\n\nconst MAX = 4;\n\ntype Props = React.PropsWithChildren<{\n  size?: number;\n  containerStyle?: StyleProp<ViewStyle>;\n}>;\nconst AvatarGroup = ({ children, containerStyle, size = 56 }: Props) => {\n  const childAmount = React.Children.count(children);\n\n  if (childAmount === 0) {\n    return (\n      <View\n        style={[\n          containerStyle,\n          {\n            overflow: 'hidden',\n            width: size,\n            height: size,\n            borderRadius: size,\n            backgroundColor: 'rgba(120,120,120,0.2)',\n          },\n        ]}\n      />\n    );\n  }\n\n  const renderAvatars = () => {\n    return (\n      React.Children.map(children, (child, index) => {\n        if (index + 1 > MAX) return child;\n        if (!React.isValidElement(child)) return child;\n\n        if (childAmount === 1) return React.cloneElement(child as ReactElement, { size, containerStyle });\n\n        const top = getTopPoint(index, childAmount) * size;\n        const start = getStartPoint(index) * size;\n        const width = getWidthPoint(index, childAmount) * size;\n        const height = getHeightPoint(index, childAmount) * size;\n        const innerStart = -getInnerStart(index, childAmount) * size;\n        const innerTop = -getInnerTop(childAmount) * size;\n\n        return (\n          <View style={{ overflow: 'hidden', position: 'absolute', top, start, width, height }}>\n            {React.cloneElement(child as ReactElement, {\n              size,\n              square: true,\n              containerStyle: { start: innerStart, top: innerTop },\n            })}\n          </View>\n        );\n      })?.slice(0, 4) ?? []\n    );\n  };\n\n  return (\n    <View style={[containerStyle, { overflow: 'hidden', width: size, height: size, borderRadius: size }]}>\n      {renderAvatars()}\n    </View>\n  );\n};\n\nconst getHeightPoint = (_: number, total: number) => {\n  if (total === 2) return 1;\n  return 0.5;\n};\nconst getWidthPoint = (idx: number, total: number) => {\n  if (total === 3 && idx === 0) return 1;\n  return 0.5;\n};\nconst getTopPoint = (idx: number, total: number) => {\n  if (total === 2) return 0;\n  if (total === 3 && idx === 0) return -0.025;\n  if (total === 3 && idx !== 0) return 0.525;\n  if (idx === 0 || idx === 1) return -0.025;\n  return 0.525;\n};\nconst getStartPoint = (idx: number) => {\n  if (idx === 0 || idx === 2) return -0.025;\n  return 0.525;\n};\nconst getInnerStart = (idx: number, total: number) => {\n  if (total === 3 && idx === 0) return 0;\n  return 0.25;\n};\nconst getInnerTop = (total: number) => {\n  if (total === 2) return 0;\n  return 0.25;\n};\n\nexport default AvatarGroup;\n"],"mappings":"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","ignoreList":[]}

package/lib/module/ui/Avatar/AvatarIcon.js

@@ -3,13 +3,12 @@ import { View } from 'react-native';
 import Icon from '../../components/Icon';
 import createStyleSheet from '../../styles/createStyleSheet';
 import useUIKitTheme from '../../theme/useUIKitTheme';
-const AvatarIcon = _ref => {
-  let {
-    size = 56,
-    icon,
-    containerStyle,
-    backgroundColor
-  } = _ref;
+const AvatarIcon = ({
+  size = 56,
+  icon,
+  containerStyle,
+  backgroundColor
+}) => {
   const {
     colors,
     palette

package/lib/module/ui/Avatar/AvatarIcon.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","Icon","createStyleSheet","useUIKitTheme","AvatarIcon","_ref","size","icon","containerStyle","backgroundColor","colors","palette","createElement","style","styles","container","width","height","borderRadius","background300","color","onBackgroundReverse01","overflow","alignItems","justifyContent"],"sources":["AvatarIcon.tsx"],"sourcesContent":["import React from 'react';\nimport { StyleProp, View, ViewStyle } from 'react-native';\n\nimport Icon from '../../components/Icon';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\n\ntype Props = {\n  icon: keyof typeof Icon.Assets;\n  size?: number;\n  backgroundColor?: string;\n  containerStyle?: StyleProp<ViewStyle>;\n};\nconst AvatarIcon = ({ size = 56, icon, containerStyle, backgroundColor }: Props) => {\n  const { colors, palette } = useUIKitTheme();\n  return (\n    <View\n      style={[\n        styles.container,\n        {\n          width: size,\n          height: size,\n          borderRadius: size / 2,\n          backgroundColor: backgroundColor ?? palette.background300,\n        },\n        containerStyle,\n      ]}\n    >\n      <Icon icon={icon} size={size / 2} color={colors.onBackgroundReverse01} />\n    </View>\n  );\n};\nconst styles = createStyleSheet({\n  container: {\n    overflow: 'hidden',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n});\nexport default AvatarIcon;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAAoBC,IAAI,QAAmB,cAAc;AAEzD,OAAOC,IAAI,MAAM,uBAAuB;AACxC,OAAOC,gBAAgB,MAAM,+BAA+B;AAC5D,OAAOC,aAAa,MAAM,2BAA2B;AAQrD,MAAMC,UAAU,GAAGC,IAAA,IAAiE;EAAA,IAAhE;IAAEC,IAAI,GAAG,EAAE;IAAEC,IAAI;IAAEC,cAAc;IAAEC;EAAuB,CAAC,GAAAJ,IAAA;EAC7E,MAAM;IAAEK,MAAM;IAAEC;EAAQ,CAAC,GAAGR,aAAa,EAAE;EAC3C,oBACEJ,KAAA,CAAAa,aAAA,CAACZ,IAAI;IACHa,KAAK,EAAE,CACLC,MAAM,CAACC,SAAS,EAChB;MACEC,KAAK,EAAEV,IAAI;MACXW,MAAM,EAAEX,IAAI;MACZY,YAAY,EAAEZ,IAAI,GAAG,CAAC;MACtBG,eAAe,EAAEA,eAAe,IAAIE,OAAO,CAACQ;IAC9C,CAAC,EACDX,cAAc;EACd,gBAEFT,KAAA,CAAAa,aAAA,CAACX,IAAI;IAACM,IAAI,EAAEA,IAAK;IAACD,IAAI,EAAEA,IAAI,GAAG,CAAE;IAACc,KAAK,EAAEV,MAAM,CAACW;EAAsB,EAAG,CACpE;AAEX,CAAC;AACD,MAAMP,MAAM,GAAGZ,gBAAgB,CAAC;EAC9Ba,SAAS,EAAE;IACTO,QAAQ,EAAE,QAAQ;IAClBC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB;AACF,CAAC,CAAC;AACF,eAAepB,UAAU"}
+{"version":3,"names":["React","View","Icon","createStyleSheet","useUIKitTheme","AvatarIcon","size","icon","containerStyle","backgroundColor","colors","palette","createElement","style","styles","container","width","height","borderRadius","background300","color","onBackgroundReverse01","overflow","alignItems","justifyContent"],"sources":["AvatarIcon.tsx"],"sourcesContent":["import React from 'react';\nimport { StyleProp, View, ViewStyle } from 'react-native';\n\nimport Icon from '../../components/Icon';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\n\ntype Props = {\n  icon: keyof typeof Icon.Assets;\n  size?: number;\n  backgroundColor?: string;\n  containerStyle?: StyleProp<ViewStyle>;\n};\nconst AvatarIcon = ({ size = 56, icon, containerStyle, backgroundColor }: Props) => {\n  const { colors, palette } = useUIKitTheme();\n  return (\n    <View\n      style={[\n        styles.container,\n        {\n          width: size,\n          height: size,\n          borderRadius: size / 2,\n          backgroundColor: backgroundColor ?? palette.background300,\n        },\n        containerStyle,\n      ]}\n    >\n      <Icon icon={icon} size={size / 2} color={colors.onBackgroundReverse01} />\n    </View>\n  );\n};\nconst styles = createStyleSheet({\n  container: {\n    overflow: 'hidden',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n});\nexport default AvatarIcon;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAAoBC,IAAI,QAAmB,cAAc;AAEzD,OAAOC,IAAI,MAAM,uBAAuB;AACxC,OAAOC,gBAAgB,MAAM,+BAA+B;AAC5D,OAAOC,aAAa,MAAM,2BAA2B;AAQrD,MAAMC,UAAU,GAAGA,CAAC;EAAEC,IAAI,GAAG,EAAE;EAAEC,IAAI;EAAEC,cAAc;EAAEC;AAAuB,CAAC,KAAK;EAClF,MAAM;IAAEC,MAAM;IAAEC;EAAQ,CAAC,GAAGP,aAAa,CAAC,CAAC;EAC3C,oBACEJ,KAAA,CAAAY,aAAA,CAACX,IAAI;IACHY,KAAK,EAAE,CACLC,MAAM,CAACC,SAAS,EAChB;MACEC,KAAK,EAAEV,IAAI;MACXW,MAAM,EAAEX,IAAI;MACZY,YAAY,EAAEZ,IAAI,GAAG,CAAC;MACtBG,eAAe,EAAEA,eAAe,IAAIE,OAAO,CAACQ;IAC9C,CAAC,EACDX,cAAc;EACd,gBAEFR,KAAA,CAAAY,aAAA,CAACV,IAAI;IAACK,IAAI,EAAEA,IAAK;IAACD,IAAI,EAAEA,IAAI,GAAG,CAAE;IAACc,KAAK,EAAEV,MAAM,CAACW;EAAsB,CAAE,CACpE,CAAC;AAEX,CAAC;AACD,MAAMP,MAAM,GAAGX,gBAAgB,CAAC;EAC9BY,SAAS,EAAE;IACTO,QAAQ,EAAE,QAAQ;IAClBC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB;AACF,CAAC,CAAC;AACF,eAAenB,UAAU","ignoreList":[]}

package/lib/module/ui/Avatar/AvatarStack.js

@@ -7,15 +7,14 @@ const DEFAULT_BORDER_WIDTH = 2;
 const DEFAULT_AVATAR_GAP = -4;
 const DEFAULT_AVATAR_SIZE = 26;
 const DEFAULT_REMAINS_MAX = 99;
-const AvatarStack = _ref => {
-  let {
-    children,
-    containerStyle,
-    styles,
-    maxAvatar = DEFAULT_MAX,
-    size = DEFAULT_AVATAR_SIZE,
-    avatarGap = DEFAULT_AVATAR_GAP
-  } = _ref;
+const AvatarStack = ({
+  children,
+  containerStyle,
+  styles,
+  maxAvatar = DEFAULT_MAX,
+  size = DEFAULT_AVATAR_SIZE,
+  avatarGap = DEFAULT_AVATAR_GAP
+}) => {
   const {
     colors,
     palette,
@@ -43,7 +42,7 @@ const AvatarStack = _ref => {
     return childrenArray.slice(0, maxAvatar).map((child, index) => /*#__PURE__*/React.cloneElement(child, {
       size: actualSize,
       containerStyle: {
-        left: actualGap * index,
+        start: actualGap * index,
         borderWidth: avatarStyles.borderWidth,
         borderColor: avatarStyles.borderColor
       }
@@ -53,7 +52,7 @@ const AvatarStack = _ref => {
     if (!shouldRenderRemains) return null;
     return /*#__PURE__*/React.createElement(View, {
       style: [avatarStyles, {
-        left: actualGap * maxAvatar,
+        start: actualGap * maxAvatar,
         width: actualSize,
         height: actualSize,
         borderRadius: actualSize / 2,
@@ -78,7 +77,7 @@ const AvatarStack = _ref => {
   };
   return /*#__PURE__*/React.createElement(View, {
     style: [containerStyle, {
-      left: -avatarStyles.borderWidth,
+      start: -avatarStyles.borderWidth,
       flexDirection: 'row',
       width: calculateWidth()
     }]

package/lib/module/ui/Avatar/AvatarStack.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","Text","useUIKitTheme","DEFAULT_MAX","DEFAULT_BORDER_WIDTH","DEFAULT_AVATAR_GAP","DEFAULT_AVATAR_SIZE","DEFAULT_REMAINS_MAX","AvatarStack","_ref","children","containerStyle","styles","maxAvatar","size","avatarGap","colors","palette","select","defaultStyles","borderWidth","borderColor","background","remainsTextColor","onBackground02","remainsBackgroundColor","light","background100","dark","background600","avatarStyles","childrenArray","Children","toArray","filter","it","isValidElement","remains","length","shouldRenderRemains","actualSize","actualGap","renderAvatars","slice","map","child","index","cloneElement","left","renderRemainsCount","createElement","style","width","height","borderRadius","alignItems","justifyContent","backgroundColor","color","fontSize","caption4","Math","min","calculateWidth","widthEach","avatarCountOffset","avatarCount","count","flexDirection"],"sources":["AvatarStack.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { StyleProp, View, ViewStyle } from 'react-native';\n\nimport Text from '../../components/Text';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\n\nconst DEFAULT_MAX = 3;\nconst DEFAULT_BORDER_WIDTH = 2;\nconst DEFAULT_AVATAR_GAP = -4;\nconst DEFAULT_AVATAR_SIZE = 26;\nconst DEFAULT_REMAINS_MAX = 99;\n\ntype Props = React.PropsWithChildren<{\n  size?: number;\n  containerStyle?: StyleProp<ViewStyle>;\n  maxAvatar?: number;\n  avatarGap?: number;\n  styles?: {\n    borderWidth?: number;\n    borderColor?: string;\n    remainsTextColor?: string;\n    remainsBackgroundColor?: string;\n  };\n}>;\n\nconst AvatarStack = ({\n  children,\n  containerStyle,\n  styles,\n  maxAvatar = DEFAULT_MAX,\n  size = DEFAULT_AVATAR_SIZE,\n  avatarGap = DEFAULT_AVATAR_GAP,\n}: Props) => {\n  const { colors, palette, select } = useUIKitTheme();\n  const defaultStyles = {\n    borderWidth: DEFAULT_BORDER_WIDTH,\n    borderColor: colors.background,\n    remainsTextColor: colors.onBackground02,\n    remainsBackgroundColor: select({ light: palette.background100, dark: palette.background600 }),\n  };\n  const avatarStyles = { ...defaultStyles, ...styles };\n\n  const childrenArray = React.Children.toArray(children).filter((it) => React.isValidElement(it));\n  const remains = childrenArray.length - maxAvatar;\n  const shouldRenderRemains = remains > 0;\n\n  const actualSize = size + avatarStyles.borderWidth * 2;\n  const actualGap = avatarGap - avatarStyles.borderWidth;\n\n  const renderAvatars = () => {\n    return childrenArray.slice(0, maxAvatar).map((child, index) =>\n      React.cloneElement(child as ReactElement, {\n        size: actualSize,\n        containerStyle: {\n          left: actualGap * index,\n          borderWidth: avatarStyles.borderWidth,\n          borderColor: avatarStyles.borderColor,\n        },\n      }),\n    );\n  };\n\n  const renderRemainsCount = () => {\n    if (!shouldRenderRemains) return null;\n    return (\n      <View\n        style={[\n          avatarStyles,\n          {\n            left: actualGap * maxAvatar,\n            width: actualSize,\n            height: actualSize,\n            borderRadius: actualSize / 2,\n            alignItems: 'center',\n            justifyContent: 'center',\n            backgroundColor: avatarStyles.remainsBackgroundColor,\n          },\n        ]}\n      >\n        <Text style={{ color: avatarStyles.remainsTextColor, fontSize: 8 }} caption4>\n          {`+${Math.min(remains, DEFAULT_REMAINS_MAX)}`}\n        </Text>\n      </View>\n    );\n  };\n\n  const calculateWidth = () => {\n    const widthEach = actualSize + actualGap;\n    const avatarCountOffset = shouldRenderRemains ? 1 : 0;\n    const avatarCount = shouldRenderRemains ? maxAvatar : childrenArray.length;\n    const count = avatarCount + avatarCountOffset;\n    return widthEach * count + avatarStyles.borderWidth;\n  };\n\n  return (\n    <View style={[containerStyle, { left: -avatarStyles.borderWidth, flexDirection: 'row', width: calculateWidth() }]}>\n      {renderAvatars()}\n      {renderRemainsCount()}\n    </View>\n  );\n};\n\nexport default AvatarStack;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAwB,OAAO;AAC3C,SAAoBC,IAAI,QAAmB,cAAc;AAEzD,OAAOC,IAAI,MAAM,uBAAuB;AACxC,OAAOC,aAAa,MAAM,2BAA2B;AAErD,MAAMC,WAAW,GAAG,CAAC;AACrB,MAAMC,oBAAoB,GAAG,CAAC;AAC9B,MAAMC,kBAAkB,GAAG,CAAC,CAAC;AAC7B,MAAMC,mBAAmB,GAAG,EAAE;AAC9B,MAAMC,mBAAmB,GAAG,EAAE;AAe9B,MAAMC,WAAW,GAAGC,IAAA,IAOP;EAAA,IAPQ;IACnBC,QAAQ;IACRC,cAAc;IACdC,MAAM;IACNC,SAAS,GAAGV,WAAW;IACvBW,IAAI,GAAGR,mBAAmB;IAC1BS,SAAS,GAAGV;EACP,CAAC,GAAAI,IAAA;EACN,MAAM;IAAEO,MAAM;IAAEC,OAAO;IAAEC;EAAO,CAAC,GAAGhB,aAAa,EAAE;EACnD,MAAMiB,aAAa,GAAG;IACpBC,WAAW,EAAEhB,oBAAoB;IACjCiB,WAAW,EAAEL,MAAM,CAACM,UAAU;IAC9BC,gBAAgB,EAAEP,MAAM,CAACQ,cAAc;IACvCC,sBAAsB,EAAEP,MAAM,CAAC;MAAEQ,KAAK,EAAET,OAAO,CAACU,aAAa;MAAEC,IAAI,EAAEX,OAAO,CAACY;IAAc,CAAC;EAC9F,CAAC;EACD,MAAMC,YAAY,GAAG;IAAE,GAAGX,aAAa;IAAE,GAAGP;EAAO,CAAC;EAEpD,MAAMmB,aAAa,GAAGhC,KAAK,CAACiC,QAAQ,CAACC,OAAO,CAACvB,QAAQ,CAAC,CAACwB,MAAM,CAAEC,EAAE,iBAAKpC,KAAK,CAACqC,cAAc,CAACD,EAAE,CAAC,CAAC;EAC/F,MAAME,OAAO,GAAGN,aAAa,CAACO,MAAM,GAAGzB,SAAS;EAChD,MAAM0B,mBAAmB,GAAGF,OAAO,GAAG,CAAC;EAEvC,MAAMG,UAAU,GAAG1B,IAAI,GAAGgB,YAAY,CAACV,WAAW,GAAG,CAAC;EACtD,MAAMqB,SAAS,GAAG1B,SAAS,GAAGe,YAAY,CAACV,WAAW;EAEtD,MAAMsB,aAAa,GAAGA,CAAA,KAAM;IAC1B,OAAOX,aAAa,CAACY,KAAK,CAAC,CAAC,EAAE9B,SAAS,CAAC,CAAC+B,GAAG,CAAC,CAACC,KAAK,EAAEC,KAAK,kBACxD/C,KAAK,CAACgD,YAAY,CAACF,KAAK,EAAkB;MACxC/B,IAAI,EAAE0B,UAAU;MAChB7B,cAAc,EAAE;QACdqC,IAAI,EAAEP,SAAS,GAAGK,KAAK;QACvB1B,WAAW,EAAEU,YAAY,CAACV,WAAW;QACrCC,WAAW,EAAES,YAAY,CAACT;MAC5B;IACF,CAAC,CAAC,CACH;EACH,CAAC;EAED,MAAM4B,kBAAkB,GAAGA,CAAA,KAAM;IAC/B,IAAI,CAACV,mBAAmB,EAAE,OAAO,IAAI;IACrC,oBACExC,KAAA,CAAAmD,aAAA,CAAClD,IAAI;MACHmD,KAAK,EAAE,CACLrB,YAAY,EACZ;QACEkB,IAAI,EAAEP,SAAS,GAAG5B,SAAS;QAC3BuC,KAAK,EAAEZ,UAAU;QACjBa,MAAM,EAAEb,UAAU;QAClBc,YAAY,EAAEd,UAAU,GAAG,CAAC;QAC5Be,UAAU,EAAE,QAAQ;QACpBC,cAAc,EAAE,QAAQ;QACxBC,eAAe,EAAE3B,YAAY,CAACL;MAChC,CAAC;IACD,gBAEF1B,KAAA,CAAAmD,aAAA,CAACjD,IAAI;MAACkD,KAAK,EAAE;QAAEO,KAAK,EAAE5B,YAAY,CAACP,gBAAgB;QAAEoC,QAAQ,EAAE;MAAE,CAAE;MAACC,QAAQ;IAAA,GACxE,IAAGC,IAAI,CAACC,GAAG,CAACzB,OAAO,EAAE9B,mBAAmB,CAAE,EAAC,CACxC,CACF;EAEX,CAAC;EAED,MAAMwD,cAAc,GAAGA,CAAA,KAAM;IAC3B,MAAMC,SAAS,GAAGxB,UAAU,GAAGC,SAAS;IACxC,MAAMwB,iBAAiB,GAAG1B,mBAAmB,GAAG,CAAC,GAAG,CAAC;IACrD,MAAM2B,WAAW,GAAG3B,mBAAmB,GAAG1B,SAAS,GAAGkB,aAAa,CAACO,MAAM;IAC1E,MAAM6B,KAAK,GAAGD,WAAW,GAAGD,iBAAiB;IAC7C,OAAOD,SAAS,GAAGG,KAAK,GAAGrC,YAAY,CAACV,WAAW;EACrD,CAAC;EAED,oBACErB,KAAA,CAAAmD,aAAA,CAAClD,IAAI;IAACmD,KAAK,EAAE,CAACxC,cAAc,EAAE;MAAEqC,IAAI,EAAE,CAAClB,YAAY,CAACV,WAAW;MAAEgD,aAAa,EAAE,KAAK;MAAEhB,KAAK,EAAEW,cAAc;IAAG,CAAC;EAAE,GAC/GrB,aAAa,EAAE,EACfO,kBAAkB,EAAE,CAChB;AAEX,CAAC;AAED,eAAezC,WAAW"}
+{"version":3,"names":["React","View","Text","useUIKitTheme","DEFAULT_MAX","DEFAULT_BORDER_WIDTH","DEFAULT_AVATAR_GAP","DEFAULT_AVATAR_SIZE","DEFAULT_REMAINS_MAX","AvatarStack","children","containerStyle","styles","maxAvatar","size","avatarGap","colors","palette","select","defaultStyles","borderWidth","borderColor","background","remainsTextColor","onBackground02","remainsBackgroundColor","light","background100","dark","background600","avatarStyles","childrenArray","Children","toArray","filter","it","isValidElement","remains","length","shouldRenderRemains","actualSize","actualGap","renderAvatars","slice","map","child","index","cloneElement","start","renderRemainsCount","createElement","style","width","height","borderRadius","alignItems","justifyContent","backgroundColor","color","fontSize","caption4","Math","min","calculateWidth","widthEach","avatarCountOffset","avatarCount","count","flexDirection"],"sources":["AvatarStack.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { StyleProp, View, ViewStyle } from 'react-native';\n\nimport Text from '../../components/Text';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\n\nconst DEFAULT_MAX = 3;\nconst DEFAULT_BORDER_WIDTH = 2;\nconst DEFAULT_AVATAR_GAP = -4;\nconst DEFAULT_AVATAR_SIZE = 26;\nconst DEFAULT_REMAINS_MAX = 99;\n\ntype Props = React.PropsWithChildren<{\n  size?: number;\n  containerStyle?: StyleProp<ViewStyle>;\n  maxAvatar?: number;\n  avatarGap?: number;\n  styles?: {\n    borderWidth?: number;\n    borderColor?: string;\n    remainsTextColor?: string;\n    remainsBackgroundColor?: string;\n  };\n}>;\n\nconst AvatarStack = ({\n  children,\n  containerStyle,\n  styles,\n  maxAvatar = DEFAULT_MAX,\n  size = DEFAULT_AVATAR_SIZE,\n  avatarGap = DEFAULT_AVATAR_GAP,\n}: Props) => {\n  const { colors, palette, select } = useUIKitTheme();\n  const defaultStyles = {\n    borderWidth: DEFAULT_BORDER_WIDTH,\n    borderColor: colors.background,\n    remainsTextColor: colors.onBackground02,\n    remainsBackgroundColor: select({ light: palette.background100, dark: palette.background600 }),\n  };\n  const avatarStyles = { ...defaultStyles, ...styles };\n\n  const childrenArray = React.Children.toArray(children).filter((it) => React.isValidElement(it));\n  const remains = childrenArray.length - maxAvatar;\n  const shouldRenderRemains = remains > 0;\n\n  const actualSize = size + avatarStyles.borderWidth * 2;\n  const actualGap = avatarGap - avatarStyles.borderWidth;\n\n  const renderAvatars = () => {\n    return childrenArray.slice(0, maxAvatar).map((child, index) =>\n      React.cloneElement(child as ReactElement, {\n        size: actualSize,\n        containerStyle: {\n          start: actualGap * index,\n          borderWidth: avatarStyles.borderWidth,\n          borderColor: avatarStyles.borderColor,\n        },\n      }),\n    );\n  };\n\n  const renderRemainsCount = () => {\n    if (!shouldRenderRemains) return null;\n    return (\n      <View\n        style={[\n          avatarStyles,\n          {\n            start: actualGap * maxAvatar,\n            width: actualSize,\n            height: actualSize,\n            borderRadius: actualSize / 2,\n            alignItems: 'center',\n            justifyContent: 'center',\n            backgroundColor: avatarStyles.remainsBackgroundColor,\n          },\n        ]}\n      >\n        <Text style={{ color: avatarStyles.remainsTextColor, fontSize: 8 }} caption4>\n          {`+${Math.min(remains, DEFAULT_REMAINS_MAX)}`}\n        </Text>\n      </View>\n    );\n  };\n\n  const calculateWidth = () => {\n    const widthEach = actualSize + actualGap;\n    const avatarCountOffset = shouldRenderRemains ? 1 : 0;\n    const avatarCount = shouldRenderRemains ? maxAvatar : childrenArray.length;\n    const count = avatarCount + avatarCountOffset;\n    return widthEach * count + avatarStyles.borderWidth;\n  };\n\n  return (\n    <View style={[containerStyle, { start: -avatarStyles.borderWidth, flexDirection: 'row', width: calculateWidth() }]}>\n      {renderAvatars()}\n      {renderRemainsCount()}\n    </View>\n  );\n};\n\nexport default AvatarStack;\n"],"mappings":"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","ignoreList":[]}

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

@@ -8,14 +8,13 @@ import useUIKitTheme from '../../theme/useUIKitTheme';
 import AvatarGroup from './AvatarGroup';
 import AvatarIcon from './AvatarIcon';
 import AvatarStack from './AvatarStack';
-const Avatar = _ref => {
-  let {
-    uri,
-    square,
-    muted = false,
-    size = 56,
-    containerStyle
-  } = _ref;
+const Avatar = ({
+  uri,
+  square,
+  muted = false,
+  size = 56,
+  containerStyle
+}) => {
   const {
     colors,
     palette
@@ -43,10 +42,9 @@ const Avatar = _ref => {
     size: size
   }));
 };
-const MutedOverlay = _ref2 => {
-  let {
-    size
-  } = _ref2;
+const MutedOverlay = ({
+  size
+}) => {
   const {
     palette
   } = useUIKitTheme();

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

@@ -1 +1 @@
-{"version":3,"names":["React","useState","StyleSheet","View","conditionChaining","Icon","Image","createStyleSheet","useUIKitTheme","AvatarGroup","AvatarIcon","AvatarStack","Avatar","_ref","uri","square","muted","size","containerStyle","colors","palette","loadFailure","setLoadFailure","createElement","style","styles","container","width","height","borderRadius","backgroundColor","background300","Boolean","onError","source","resizeMode","absoluteFill","icon","color","onBackgroundReverse01","MutedOverlay","_ref2","primary300","opacity","onBackgroundDark01","alignItems","justifyContent","overflow","Object","assign","Group","Stack"],"sources":["index.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';\n\nimport { conditionChaining } from '@sendbird/uikit-utils';\n\nimport Icon from '../../components/Icon';\nimport Image from '../../components/Image';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport AvatarGroup from './AvatarGroup';\nimport AvatarIcon from './AvatarIcon';\nimport AvatarStack from './AvatarStack';\n\ntype Props = {\n  uri?: string;\n  size?: number;\n  square?: boolean;\n  muted?: boolean;\n  containerStyle?: StyleProp<ViewStyle>;\n};\n\nconst Avatar = ({ uri, square, muted = false, size = 56, containerStyle }: Props) => {\n  const { colors, palette } = useUIKitTheme();\n  const [loadFailure, setLoadFailure] = useState(false);\n\n  return (\n    <View\n      style={[\n        styles.container,\n        { width: size, height: size, borderRadius: square ? 0 : size / 2, backgroundColor: palette.background300 },\n        containerStyle,\n      ]}\n    >\n      {conditionChaining(\n        [Boolean(uri) && !loadFailure],\n        [\n          <Image\n            onError={() => setLoadFailure(true)}\n            source={{ uri }}\n            resizeMode={'cover'}\n            style={StyleSheet.absoluteFill}\n          />,\n          <Icon icon={'user'} size={size / 2} color={colors.onBackgroundReverse01} />,\n        ],\n      )}\n      {muted && <MutedOverlay size={size} />}\n    </View>\n  );\n};\n\nconst MutedOverlay = ({ size }: { size: number }) => {\n  const { palette } = useUIKitTheme();\n  return (\n    <View style={[styles.container, StyleSheet.absoluteFill]}>\n      <View style={[StyleSheet.absoluteFill, { backgroundColor: palette.primary300, opacity: 0.5 }]} />\n      <Icon color={palette.onBackgroundDark01} icon={'mute'} size={size * 0.72} />\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    alignItems: 'center',\n    justifyContent: 'center',\n    overflow: 'hidden',\n  },\n});\n\nexport default Object.assign(Avatar, {\n  Group: AvatarGroup,\n  Icon: AvatarIcon,\n  Stack: AvatarStack,\n});\n"],"mappings":"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"}
+{"version":3,"names":["React","useState","StyleSheet","View","conditionChaining","Icon","Image","createStyleSheet","useUIKitTheme","AvatarGroup","AvatarIcon","AvatarStack","Avatar","uri","square","muted","size","containerStyle","colors","palette","loadFailure","setLoadFailure","createElement","style","styles","container","width","height","borderRadius","backgroundColor","background300","Boolean","onError","source","resizeMode","absoluteFill","icon","color","onBackgroundReverse01","MutedOverlay","primary300","opacity","onBackgroundDark01","alignItems","justifyContent","overflow","Object","assign","Group","Stack"],"sources":["index.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';\n\nimport { conditionChaining } from '@sendbird/uikit-utils';\n\nimport Icon from '../../components/Icon';\nimport Image from '../../components/Image';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport AvatarGroup from './AvatarGroup';\nimport AvatarIcon from './AvatarIcon';\nimport AvatarStack from './AvatarStack';\n\ntype Props = {\n  uri?: string;\n  size?: number;\n  square?: boolean;\n  muted?: boolean;\n  containerStyle?: StyleProp<ViewStyle>;\n};\n\nconst Avatar = ({ uri, square, muted = false, size = 56, containerStyle }: Props) => {\n  const { colors, palette } = useUIKitTheme();\n  const [loadFailure, setLoadFailure] = useState(false);\n\n  return (\n    <View\n      style={[\n        styles.container,\n        { width: size, height: size, borderRadius: square ? 0 : size / 2, backgroundColor: palette.background300 },\n        containerStyle,\n      ]}\n    >\n      {conditionChaining(\n        [Boolean(uri) && !loadFailure],\n        [\n          <Image\n            onError={() => setLoadFailure(true)}\n            source={{ uri }}\n            resizeMode={'cover'}\n            style={StyleSheet.absoluteFill}\n          />,\n          <Icon icon={'user'} size={size / 2} color={colors.onBackgroundReverse01} />,\n        ],\n      )}\n      {muted && <MutedOverlay size={size} />}\n    </View>\n  );\n};\n\nconst MutedOverlay = ({ size }: { size: number }) => {\n  const { palette } = useUIKitTheme();\n  return (\n    <View style={[styles.container, StyleSheet.absoluteFill]}>\n      <View style={[StyleSheet.absoluteFill, { backgroundColor: palette.primary300, opacity: 0.5 }]} />\n      <Icon color={palette.onBackgroundDark01} icon={'mute'} size={size * 0.72} />\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    alignItems: 'center',\n    justifyContent: 'center',\n    overflow: 'hidden',\n  },\n});\n\nexport default Object.assign(Avatar, {\n  Group: AvatarGroup,\n  Icon: AvatarIcon,\n  Stack: AvatarStack,\n});\n"],"mappings":"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","ignoreList":[]}

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

@@ -4,15 +4,14 @@ import { truncatedCount } from '@sendbird/uikit-utils';
 import Text from '../../components/Text';
 import createStyleSheet from '../../styles/createStyleSheet';
 import useUIKitTheme from '../../theme/useUIKitTheme';
-const Badge = _ref => {
-  let {
-    count,
-    maxCount,
-    badgeColor,
-    textColor,
-    style,
-    size = 'default'
-  } = _ref;
+const Badge = ({
+  count,
+  maxCount,
+  badgeColor,
+  textColor,
+  style,
+  size = 'default'
+}) => {
   const {
     colors
   } = useUIKitTheme();

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

@@ -1 +1 @@
-{"version":3,"names":["React","Platform","View","truncatedCount","Text","createStyleSheet","useUIKitTheme","Badge","_ref","count","maxCount","badgeColor","textColor","style","size","colors","isSmall","createElement","styles","badgeSmall","badgeDefault","backgroundColor","ui","badge","default","none","background","badgeSmallPadding","badgeDefaultPadding","caption1","color","text","paddingTop","select","ios","android","minWidth","minHeight","borderRadius","alignItems","justifyContent","paddingHorizontal"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\nimport { Platform, StyleProp, View, ViewStyle } from 'react-native';\n\nimport { truncatedCount } from '@sendbird/uikit-utils';\n\nimport Text from '../../components/Text';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\n\ntype Props = {\n  count: number;\n  maxCount?: number;\n  badgeColor?: string;\n  textColor?: string;\n  style?: StyleProp<ViewStyle>;\n  size?: 'small' | 'default';\n};\n\nconst Badge = ({ count, maxCount, badgeColor, textColor, style, size = 'default' }: Props) => {\n  const { colors } = useUIKitTheme();\n  const isSmall = size === 'small';\n  return (\n    <View\n      style={[\n        isSmall ? styles.badgeSmall : styles.badgeDefault,\n        { backgroundColor: badgeColor ?? colors.ui.badge.default.none.background },\n        count >= 10 && (isSmall ? styles.badgeSmallPadding : styles.badgeDefaultPadding),\n        style,\n      ]}\n    >\n      <Text caption1 color={textColor ?? colors.ui.badge.default.none.text}>\n        {truncatedCount(count, maxCount)}\n      </Text>\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  badgeDefault: {\n    paddingTop: Platform.select({ ios: 2, android: 2 }),\n    minWidth: 20,\n    minHeight: 20,\n    borderRadius: 99,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  badgeDefaultPadding: {\n    paddingHorizontal: 8,\n  },\n  badgeSmall: {\n    paddingTop: Platform.select({ ios: 3, android: 2 }),\n    minWidth: 16,\n    minHeight: 16,\n    borderRadius: 99,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  badgeSmallPadding: {\n    paddingHorizontal: 4,\n  },\n});\n\nexport default Badge;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ,EAAaC,IAAI,QAAmB,cAAc;AAEnE,SAASC,cAAc,QAAQ,uBAAuB;AAEtD,OAAOC,IAAI,MAAM,uBAAuB;AACxC,OAAOC,gBAAgB,MAAM,+BAA+B;AAC5D,OAAOC,aAAa,MAAM,2BAA2B;AAWrD,MAAMC,KAAK,GAAGC,IAAA,IAAgF;EAAA,IAA/E;IAAEC,KAAK;IAAEC,QAAQ;IAAEC,UAAU;IAAEC,SAAS;IAAEC,KAAK;IAAEC,IAAI,GAAG;EAAiB,CAAC,GAAAN,IAAA;EACvF,MAAM;IAAEO;EAAO,CAAC,GAAGT,aAAa,EAAE;EAClC,MAAMU,OAAO,GAAGF,IAAI,KAAK,OAAO;EAChC,oBACEd,KAAA,CAAAiB,aAAA,CAACf,IAAI;IACHW,KAAK,EAAE,CACLG,OAAO,GAAGE,MAAM,CAACC,UAAU,GAAGD,MAAM,CAACE,YAAY,EACjD;MAAEC,eAAe,EAAEV,UAAU,IAAII,MAAM,CAACO,EAAE,CAACC,KAAK,CAACC,OAAO,CAACC,IAAI,CAACC;IAAW,CAAC,EAC1EjB,KAAK,IAAI,EAAE,KAAKO,OAAO,GAAGE,MAAM,CAACS,iBAAiB,GAAGT,MAAM,CAACU,mBAAmB,CAAC,EAChFf,KAAK;EACL,gBAEFb,KAAA,CAAAiB,aAAA,CAACb,IAAI;IAACyB,QAAQ;IAACC,KAAK,EAAElB,SAAS,IAAIG,MAAM,CAACO,EAAE,CAACC,KAAK,CAACC,OAAO,CAACC,IAAI,CAACM;EAAK,GAClE5B,cAAc,CAACM,KAAK,EAAEC,QAAQ,CAAC,CAC3B,CACF;AAEX,CAAC;AAED,MAAMQ,MAAM,GAAGb,gBAAgB,CAAC;EAC9Be,YAAY,EAAE;IACZY,UAAU,EAAE/B,QAAQ,CAACgC,MAAM,CAAC;MAAEC,GAAG,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAC,CAAC;IACnDC,QAAQ,EAAE,EAAE;IACZC,SAAS,EAAE,EAAE;IACbC,YAAY,EAAE,EAAE;IAChBC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB,CAAC;EACDZ,mBAAmB,EAAE;IACnBa,iBAAiB,EAAE;EACrB,CAAC;EACDtB,UAAU,EAAE;IACVa,UAAU,EAAE/B,QAAQ,CAACgC,MAAM,CAAC;MAAEC,GAAG,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAC,CAAC;IACnDC,QAAQ,EAAE,EAAE;IACZC,SAAS,EAAE,EAAE;IACbC,YAAY,EAAE,EAAE;IAChBC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB,CAAC;EACDb,iBAAiB,EAAE;IACjBc,iBAAiB,EAAE;EACrB;AACF,CAAC,CAAC;AAEF,eAAelC,KAAK"}
+{"version":3,"names":["React","Platform","View","truncatedCount","Text","createStyleSheet","useUIKitTheme","Badge","count","maxCount","badgeColor","textColor","style","size","colors","isSmall","createElement","styles","badgeSmall","badgeDefault","backgroundColor","ui","badge","default","none","background","badgeSmallPadding","badgeDefaultPadding","caption1","color","text","paddingTop","select","ios","android","minWidth","minHeight","borderRadius","alignItems","justifyContent","paddingHorizontal"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\nimport { Platform, StyleProp, View, ViewStyle } from 'react-native';\n\nimport { truncatedCount } from '@sendbird/uikit-utils';\n\nimport Text from '../../components/Text';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\n\ntype Props = {\n  count: number;\n  maxCount?: number;\n  badgeColor?: string;\n  textColor?: string;\n  style?: StyleProp<ViewStyle>;\n  size?: 'small' | 'default';\n};\n\nconst Badge = ({ count, maxCount, badgeColor, textColor, style, size = 'default' }: Props) => {\n  const { colors } = useUIKitTheme();\n  const isSmall = size === 'small';\n  return (\n    <View\n      style={[\n        isSmall ? styles.badgeSmall : styles.badgeDefault,\n        { backgroundColor: badgeColor ?? colors.ui.badge.default.none.background },\n        count >= 10 && (isSmall ? styles.badgeSmallPadding : styles.badgeDefaultPadding),\n        style,\n      ]}\n    >\n      <Text caption1 color={textColor ?? colors.ui.badge.default.none.text}>\n        {truncatedCount(count, maxCount)}\n      </Text>\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  badgeDefault: {\n    paddingTop: Platform.select({ ios: 2, android: 2 }),\n    minWidth: 20,\n    minHeight: 20,\n    borderRadius: 99,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  badgeDefaultPadding: {\n    paddingHorizontal: 8,\n  },\n  badgeSmall: {\n    paddingTop: Platform.select({ ios: 3, android: 2 }),\n    minWidth: 16,\n    minHeight: 16,\n    borderRadius: 99,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  badgeSmallPadding: {\n    paddingHorizontal: 4,\n  },\n});\n\nexport default Badge;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ,EAAaC,IAAI,QAAmB,cAAc;AAEnE,SAASC,cAAc,QAAQ,uBAAuB;AAEtD,OAAOC,IAAI,MAAM,uBAAuB;AACxC,OAAOC,gBAAgB,MAAM,+BAA+B;AAC5D,OAAOC,aAAa,MAAM,2BAA2B;AAWrD,MAAMC,KAAK,GAAGA,CAAC;EAAEC,KAAK;EAAEC,QAAQ;EAAEC,UAAU;EAAEC,SAAS;EAAEC,KAAK;EAAEC,IAAI,GAAG;AAAiB,CAAC,KAAK;EAC5F,MAAM;IAAEC;EAAO,CAAC,GAAGR,aAAa,CAAC,CAAC;EAClC,MAAMS,OAAO,GAAGF,IAAI,KAAK,OAAO;EAChC,oBACEb,KAAA,CAAAgB,aAAA,CAACd,IAAI;IACHU,KAAK,EAAE,CACLG,OAAO,GAAGE,MAAM,CAACC,UAAU,GAAGD,MAAM,CAACE,YAAY,EACjD;MAAEC,eAAe,EAAEV,UAAU,IAAII,MAAM,CAACO,EAAE,CAACC,KAAK,CAACC,OAAO,CAACC,IAAI,CAACC;IAAW,CAAC,EAC1EjB,KAAK,IAAI,EAAE,KAAKO,OAAO,GAAGE,MAAM,CAACS,iBAAiB,GAAGT,MAAM,CAACU,mBAAmB,CAAC,EAChFf,KAAK;EACL,gBAEFZ,KAAA,CAAAgB,aAAA,CAACZ,IAAI;IAACwB,QAAQ;IAACC,KAAK,EAAElB,SAAS,IAAIG,MAAM,CAACO,EAAE,CAACC,KAAK,CAACC,OAAO,CAACC,IAAI,CAACM;EAAK,GAClE3B,cAAc,CAACK,KAAK,EAAEC,QAAQ,CAC3B,CACF,CAAC;AAEX,CAAC;AAED,MAAMQ,MAAM,GAAGZ,gBAAgB,CAAC;EAC9Bc,YAAY,EAAE;IACZY,UAAU,EAAE9B,QAAQ,CAAC+B,MAAM,CAAC;MAAEC,GAAG,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAC,CAAC;IACnDC,QAAQ,EAAE,EAAE;IACZC,SAAS,EAAE,EAAE;IACbC,YAAY,EAAE,EAAE;IAChBC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB,CAAC;EACDZ,mBAAmB,EAAE;IACnBa,iBAAiB,EAAE;EACrB,CAAC;EACDtB,UAAU,EAAE;IACVa,UAAU,EAAE9B,QAAQ,CAAC+B,MAAM,CAAC;MAAEC,GAAG,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAC,CAAC;IACnDC,QAAQ,EAAE,EAAE;IACZC,SAAS,EAAE,EAAE;IACbC,YAAY,EAAE,EAAE;IAChBC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB,CAAC;EACDb,iBAAiB,EAAE;IACjBc,iBAAiB,EAAE;EACrB;AACF,CAAC,CAAC;AAEF,eAAejC,KAAK","ignoreList":[]}