@100mslive/react-native-room-kit 0.0.4 → 0.1.0

package/src/components/HMSManageLeave.tsx

@@ -1,17 +1,20 @@
 import * as React from 'react';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
-import Modal from 'react-native-modal';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useSelector } from 'react-redux';
 
-import { AlertIcon, LeaveIcon } from '../Icons';
-import { useLeaveMethods } from '../hooks-util';
+import { EndIcon, LeaveIcon } from '../Icons';
+import {
+  useHMSRoomStyleSheet,
+  useIsHLSViewer,
+  useLeaveMethods,
+} from '../hooks-util';
 import type { RootState } from '../redux';
 import { COLORS } from '../utils/theme';
 import { ModalTypes } from '../utils/types';
-import { DefaultModal } from './DefaultModal';
-import { EndRoomModal, LeaveRoomModal } from './Modals';
 import { PressableIcon } from './PressableIcon';
+import { BottomSheet } from './BottomSheet';
+import { StopIcon } from '../Icons';
+import { EndRoomModalContent } from './EndRoomModalContent';
 
 export const HMSManageLeave: React.FC<LeaveButtonProps> = (props) => {
   // TODO: read current meeting joined state
@@ -34,7 +37,7 @@ type LeaveButtonProps =
 
 const LeaveButton: React.FC<LeaveButtonProps> = (props) => {
   const leavePopCloseAction = React.useRef(ModalTypes.DEFAULT);
-
+  const isHLSViewer = useIsHLSViewer();
   const [leavePopVisible, setLeavePopVisible] = React.useState(false);
   const [leaveModalType, setLeaveModalType] = React.useState(
     ModalTypes.DEFAULT
@@ -43,6 +46,8 @@ const LeaveButton: React.FC<LeaveButtonProps> = (props) => {
     (state: RootState) => state.hmsStates.localPeer?.role?.permissions?.endRoom
   );
 
+  const { leave } = useLeaveMethods();
+
   /**
    * Opens the Leave Popup Menu
    */
@@ -59,8 +64,8 @@ const LeaveButton: React.FC<LeaveButtonProps> = (props) => {
    * Leave Modal will open after the popup is hidden
    */
   const handleLeavePress = () => {
-    leavePopCloseAction.current = ModalTypes.LEAVE_ROOM;
     setLeavePopVisible(false);
+    leave();
   };
 
   /**
@@ -90,13 +95,13 @@ const LeaveButton: React.FC<LeaveButtonProps> = (props) => {
 
   const dismissModal = () => setLeaveModalType(ModalTypes.DEFAULT);
 
-  const { leave, endRoom } = useLeaveMethods();
-
   const leaveIconDelegate =
     'leaveIconDelegate' in props && props.leaveIconDelegate ? (
       props.leaveIconDelegate
+    ) : isHLSViewer ? (
+      <LeaveIcon style={{ transform: [{ rotateZ: '180 deg' }] }} />
     ) : (
-      <LeaveIcon />
+      <EndIcon />
     );
 
   const leaveButtonDelegate =
@@ -113,7 +118,7 @@ const LeaveButton: React.FC<LeaveButtonProps> = (props) => {
         style: styles.button,
       })}
 
-      <LeavePopup
+      <LeaveBottomSheet
         isVisible={leavePopVisible}
         onEndSessionPress={handleEndSessionPress}
         onLeavePress={handleLeavePress}
@@ -121,27 +126,19 @@ const LeaveButton: React.FC<LeaveButtonProps> = (props) => {
         onPopupHide={handlePopupHide}
       />
 
-      <DefaultModal
-        modalPosiion="center"
-        modalVisible={leaveModalType === ModalTypes.LEAVE_ROOM}
-        setModalVisible={dismissModal}
-      >
-        <LeaveRoomModal onSuccess={leave} cancelModal={dismissModal} />
-      </DefaultModal>
-
-      <DefaultModal
-        modalPosiion="center"
-        modalVisible={leaveModalType === ModalTypes.END_ROOM}
-        setModalVisible={dismissModal}
+      <BottomSheet
+        dismissModal={dismissModal}
+        isVisible={leaveModalType === ModalTypes.END_ROOM}
+        animationOutTiming={700}
       >
-        <EndRoomModal onSuccess={endRoom} cancelModal={dismissModal} />
-      </DefaultModal>
+        <EndRoomModalContent dismissModal={dismissModal} />
+      </BottomSheet>
     </View>
   );
 };
 
-const HEADER_CONTENT_HEIGHT = 24 + 8 + 8 + 2; // ICON_SIZE + TOP_PADDING + BOTTOM_PADDING + TOP&BOTTOM_BORDER_WIDTH
-const HEADER_HEIGHT = 8 + HEADER_CONTENT_HEIGHT + 8; // TOP_HEADER_PADDING + HEADER_CONTENT_HEIGHT + BOTTOM_HEADER_PADDING
+// const HEADER_CONTENT_HEIGHT = 24 + 8 + 8 + 2; // ICON_SIZE + TOP_PADDING + BOTTOM_PADDING + TOP&BOTTOM_BORDER_WIDTH
+// const HEADER_HEIGHT = 8 + HEADER_CONTENT_HEIGHT + 8; // TOP_HEADER_PADDING + HEADER_CONTENT_HEIGHT + BOTTOM_HEADER_PADDING
 
 const styles = StyleSheet.create({
   button: {
@@ -150,7 +147,7 @@ const styles = StyleSheet.create({
   },
 });
 
-interface LeavePopupProps {
+interface LeaveBottomSheetProps {
   isVisible: boolean;
   onPopupDismiss(): void;
   onLeavePress(): void;
@@ -158,121 +155,119 @@ interface LeavePopupProps {
   onPopupHide(): void;
 }
 
-const LeavePopup: React.FC<LeavePopupProps> = ({
+const LeaveBottomSheet: React.FC<LeaveBottomSheetProps> = ({
   isVisible,
   onPopupDismiss,
   onLeavePress,
   onEndSessionPress,
   onPopupHide,
 }) => {
-  const safeAreaInsets = useSafeAreaInsets();
   const canEndRoom = useSelector(
     (state: RootState) => state.hmsStates.localPeer?.role?.permissions?.endRoom
   );
 
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    text: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
+    subtext: {
+      color: theme.palette.on_surface_low,
+      fontFamily: `${typography.font_family}-Regular`,
+    },
+    endButton: {
+      backgroundColor: theme.palette.alert_error_dim,
+    },
+    endText: {
+      color: theme.palette.alert_error_brighter,
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
+    endSubtext: {
+      color: theme.palette.alert_error_bright,
+      fontFamily: `${typography.font_family}-Regular`,
+    },
+    endIcon: {
+      tintColor: theme.palette.alert_error_brighter,
+    },
+  }));
+
   return (
-    <Modal
+    <BottomSheet
       isVisible={isVisible}
-      animationIn={'fadeIn'}
-      animationOut={'fadeOut'}
-      backdropColor={COLORS.BACKGROUND.DIM}
-      backdropOpacity={0}
-      onBackButtonPress={onPopupDismiss}
-      onBackdropPress={onPopupDismiss}
-      useNativeDriver={true}
+      containerStyle={leavePopupStyles.container}
+      dismissModal={onPopupDismiss}
       onModalHide={onPopupHide}
-      useNativeDriverForBackdrop={true}
-      hideModalContentWhileAnimating={true}
-      style={leavePopupStyles.modal}
+      animationOutTiming={700}
     >
-      <View
-        style={[
-          leavePopupStyles.leavePopupContent,
-          {
-            marginTop: safeAreaInsets.top + HEADER_HEIGHT,
-            marginLeft: safeAreaInsets.left + 16 - 1, // LEFT_HEADER_PADDING - HEADER_BORDER_WIDTH,
-            marginRight: safeAreaInsets.right,
-            marginBottom: safeAreaInsets.bottom,
-          },
-        ]}
-      >
+      <View>
         <TouchableOpacity
-          style={leavePopupStyles.leaveButton}
+          style={leavePopupStyles.button}
           onPress={onLeavePress}
         >
-          <LeaveIcon style={leavePopupStyles.leaveButtonIcon} />
-          <Text style={leavePopupStyles.leaveButtonText}>Leave Studio</Text>
+          <LeaveIcon style={leavePopupStyles.icon} />
+
+          <View style={leavePopupStyles.textContainer}>
+            <Text style={[leavePopupStyles.text, hmsRoomStyles.text]}>
+              Leave
+            </Text>
+            <Text style={[leavePopupStyles.subtext, hmsRoomStyles.subtext]}>
+              Others will continue after you leave. You can join the session
+              again.
+            </Text>
+          </View>
         </TouchableOpacity>
 
         {canEndRoom ? (
-          <>
-            <View style={leavePopupStyles.divider} />
+          <TouchableOpacity
+            style={[leavePopupStyles.button, hmsRoomStyles.endButton]}
+            onPress={onEndSessionPress}
+          >
+            <StopIcon style={[leavePopupStyles.icon, hmsRoomStyles.endIcon]} />
 
-            <TouchableOpacity
-              style={leavePopupStyles.endRoomButton}
-              onPress={onEndSessionPress}
-            >
-              <AlertIcon style={leavePopupStyles.endRoomIcon} />
-              <Text style={leavePopupStyles.endRoomText}>End Session</Text>
-            </TouchableOpacity>
-          </>
+            <View style={leavePopupStyles.textContainer}>
+              <Text style={[leavePopupStyles.text, hmsRoomStyles.endText]}>
+                End Stream
+              </Text>
+              <Text
+                style={[leavePopupStyles.subtext, hmsRoomStyles.endSubtext]}
+              >
+                The stream & session will end for everyone. You can't undo this
+                action.
+              </Text>
+            </View>
+          </TouchableOpacity>
         ) : null}
       </View>
-    </Modal>
+    </BottomSheet>
   );
 };
 
 const leavePopupStyles = StyleSheet.create({
-  modal: {
-    margin: 0,
-    justifyContent: 'flex-start',
+  container: {
+    paddingBottom: 0,
   },
-  leavePopupContent: {
-    overflow: 'hidden',
-    width: 243,
-    backgroundColor: COLORS.SURFACE.DIM,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: COLORS.BORDER.BRIGHT,
-  },
-  leaveButton: {
+  button: {
     flexDirection: 'row',
-    paddingHorizontal: 8,
-    paddingVertical: 16,
+    padding: 24,
   },
-  leaveButtonIcon: {
-    width: 20,
-    height: 20,
-    marginHorizontal: 8,
+  icon: {
+    width: 24,
+    height: 24,
+    marginRight: 16,
     transform: [{ rotateY: '180deg' }],
   },
-  leaveButtonText: {
-    color: COLORS.SURFACE.ON_SURFACE.HIGH,
-    fontSize: 14,
-    fontFamily: 'Inter',
-    fontWeight: '600',
-    lineHeight: 20,
-  },
-  divider: {
-    height: 1,
-    backgroundColor: COLORS.BORDER.BRIGHT,
-  },
-  endRoomButton: {
-    flexDirection: 'row',
-    backgroundColor: COLORS.ALERT.ERROR.DIM,
-    paddingHorizontal: 8,
-    paddingVertical: 16,
+  textContainer: {
+    flex: 1,
   },
-  endRoomIcon: {
-    width: 20,
-    height: 20,
-    marginHorizontal: 8,
+  text: {
+    fontSize: 20,
+    lineHeight: 24,
+    letterSpacing: 0.15,
   },
-  endRoomText: {
-    color: COLORS.ALERT.ERROR.BRIGHT,
+  subtext: {
     fontSize: 14,
-    fontFamily: 'Inter',
-    fontWeight: '600',
     lineHeight: 20,
+    letterSpacing: 0.25,
+    marginTop: 4,
   },
 });

package/src/components/HMSManageLocalAudio.tsx

@@ -1,11 +1,9 @@
 import * as React from 'react';
-import { StyleSheet } from 'react-native';
 import { useSelector } from 'react-redux';
 
 import { MicIcon } from '../Icons';
 import { useCanPublishAudio, useHMSActions } from '../hooks-sdk';
 import type { RootState } from '../redux';
-import { COLORS } from '../utils/theme';
 import { PressableIcon } from './PressableIcon';
 
 export const HMSManageLocalAudio = () => {
@@ -34,16 +32,9 @@ const ToggleAudioMuteButton = () => {
   return (
     <PressableIcon
       onPress={handleAudioMuteTogglePress}
-      style={isLocalAudioMuted ? styles.mutedButton : undefined}
+      active={isLocalAudioMuted}
     >
       <MicIcon muted={!!isLocalAudioMuted} />
     </PressableIcon>
   );
 };
-
-const styles = StyleSheet.create({
-  mutedButton: {
-    backgroundColor: COLORS.SECONDARY.DIM,
-    borderColor: COLORS.SECONDARY.DIM,
-  },
-});

package/src/components/HMSManageLocalVideo.tsx

@@ -1,9 +1,7 @@
 import * as React from 'react';
-import { StyleSheet } from 'react-native';
 import { useSelector } from 'react-redux';
 
 import type { RootState } from '../redux';
-import { COLORS } from '../utils/theme';
 import { useCanPublishVideo, useHMSActions } from '../hooks-sdk';
 import { PressableIcon } from './PressableIcon';
 import { CameraIcon } from '../Icons';
@@ -34,16 +32,9 @@ const ToggleVideoMuteButton = () => {
   return (
     <PressableIcon
       onPress={handleVideoMuteTogglePress}
-      style={isLocalVideoMuted ? styles.mutedButton : undefined}
+      active={isLocalVideoMuted}
     >
       <CameraIcon muted={!!isLocalVideoMuted} />
     </PressableIcon>
   );
 };
-
-const styles = StyleSheet.create({
-  mutedButton: {
-    backgroundColor: COLORS.SECONDARY.DIM,
-    borderColor: COLORS.SECONDARY.DIM,
-  },
-});

package/src/components/HMSMeetingEnded.tsx

@@ -22,8 +22,7 @@ const styles = StyleSheet.create({
   title: {
     color: COLORS.SURFACE.ON_SURFACE.HIGH,
     fontSize: 24,
-    fontFamily: 'Inter',
-    fontWeight: '600',
+    fontFamily: 'Inter-SemiBold',
     lineHeight: 32,
   },
 });

package/src/components/HMSPreviewEditName.tsx

@@ -1,11 +1,10 @@
 import * as React from 'react';
-import { Platform, StyleSheet, TextInput } from 'react-native';
 import { useDispatch, useSelector } from 'react-redux';
 
-import { COLORS } from '../utils/theme';
 import type { RootState } from '../redux';
 import { changeUsername } from '../redux/actions';
 import { useHMSConfig } from '../hooks-util';
+import { HMSTextInput } from './HMSTextInput';
 
 export interface HMSPreviewEditNameProps {}
 
@@ -13,52 +12,11 @@ export const HMSPreviewEditName: React.FC<HMSPreviewEditNameProps> = () => {
   const dispatch = useDispatch();
   const { updateConfig } = useHMSConfig();
   const userName = useSelector((state: RootState) => state.user.userName);
-  const [inputFocused, setInputFocused] = React.useState(false);
 
   const handleNameChange = (name: string) => {
     dispatch(changeUsername(name));
     updateConfig({ username: name });
   };
 
-  const handleInputFocus = () => setInputFocused(true);
-
-  const handleInputBlur = () => setInputFocused(false);
-
-  return (
-    <TextInput
-      style={[styles.input, inputFocused ? styles.focusedInput : null]}
-      value={userName}
-      onChangeText={handleNameChange}
-      placeholder="Enter Name..."
-      autoCapitalize="words"
-      autoCompleteType="name"
-      placeholderTextColor={COLORS.SURFACE.ON_SURFACE.LOW}
-      selectionColor={COLORS.SURFACE.ON_SURFACE.HIGH}
-      onFocus={handleInputFocus}
-      onBlur={handleInputBlur}
-    />
-  );
+  return <HMSTextInput value={userName} onChangeText={handleNameChange} />;
 };
-
-const styles = StyleSheet.create({
-  input: {
-    flex: 1,
-    height: 50,
-    textAlignVertical: 'center',
-    backgroundColor: COLORS.SURFACE.DEFAULT,
-    paddingHorizontal: 16,
-    borderRadius: 8,
-    color: COLORS.SURFACE.ON_SURFACE.HIGH,
-    fontSize: 16,
-    lineHeight: Platform.OS === 'android' ? 24 : undefined,
-    fontFamily: 'Inter',
-    fontWeight: '400',
-    letterSpacing: 0.5,
-    borderWidth: 2,
-    borderColor: COLORS.SURFACE.DEFAULT,
-  },
-  focusedInput: {
-    borderColor: COLORS.PRIMARY.DEFAULT,
-    borderWidth: 2,
-  },
-});

package/src/components/HMSPreviewHLSLiveIndicator.tsx

@@ -2,24 +2,37 @@ import * as React from 'react';
 import { View, Text, StyleSheet } from 'react-native';
 import { useSelector } from 'react-redux';
 
-import { COLORS } from '../utils/theme';
 import type { RootState } from '../redux';
+import { useHMSRoomStyleSheet } from '../hooks-util';
 
 export const HMSPreviewHLSLiveIndicator = () => {
   const isHLSStreaming = useSelector(
     (state: RootState) => state.hmsStates.room?.hlsStreamingState?.running
   );
 
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    container: {
+      backgroundColor: theme.palette.alert_error_default,
+    },
+    circle: {
+      backgroundColor: theme.palette.on_surface_high,
+    },
+    text: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
+  }));
+
   if (!isHLSStreaming) {
     return null;
   }
 
   return (
-    <View style={styles.container}>
+    <View style={[styles.container, hmsRoomStyles.container]}>
       <View style={styles.circleContainer}>
-        <View style={styles.circle} />
+        <View style={[styles.circle, hmsRoomStyles.circle]} />
       </View>
-      <Text style={styles.text}>LIVE</Text>
+      <Text style={[styles.text, hmsRoomStyles.text]}>LIVE</Text>
     </View>
   );
 };
@@ -29,7 +42,6 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     borderRadius: 20,
-    backgroundColor: COLORS.ALERT.ERROR.DEFAULT,
     paddingLeft: 8,
     paddingRight: 12,
     marginRight: 8,
@@ -44,14 +56,10 @@ const styles = StyleSheet.create({
     width: 12,
     height: 12,
     borderRadius: 6,
-    backgroundColor: COLORS.WHITE,
   },
   text: {
     marginLeft: 4,
-    color: COLORS.SURFACE.ON_SURFACE.HIGH,
     fontSize: 14,
-    fontFamily: 'Inter',
-    fontWeight: '600',
     lineHeight: 20,
     letterSpacing: 0.25,
   },

package/src/components/HMSPreviewJoinButton.tsx

@@ -1,16 +1,11 @@
 import * as React from 'react';
-import {
-  ActivityIndicator,
-  StyleSheet,
-  Text,
-  TouchableHighlight,
-} from 'react-native';
-import { useSelector } from 'react-redux';
+import { StyleSheet } from 'react-native';
+import { shallowEqual, useSelector } from 'react-redux';
 
-import { COLORS } from '../utils/theme';
 import type { RootState } from '../redux';
 import { RadioIcon } from '../Icons';
-import { useShouldGoLive } from '../hooks-util';
+import { useHMSRoomStyle, useShouldGoLive } from '../hooks-util';
+import { HMSPrimaryButton } from './HMSPrimaryButton';
 
 export interface HMSPreviewJoinButtonProps {
   onJoin(): void;
@@ -25,80 +20,47 @@ export const HMSPreviewJoinButton: React.FC<HMSPreviewJoinButtonProps> = ({
     (state: RootState) => state.user.userName.length <= 0
   );
 
+  const joinButtonLabels = useSelector((state: RootState) => {
+    const layoutConfig = state.hmsStates.layoutConfig;
+    const joinLayoutConfig =
+      layoutConfig?.screens?.preview?.default?.elements?.join_form;
+
+    return {
+      joinBtnLabel: joinLayoutConfig?.join_btn_label || 'Join Now',
+      goLiveBtnLabel: joinLayoutConfig?.go_live_btn_label || 'Go Live',
+    };
+  }, shallowEqual);
+
   const shouldGoLive = useShouldGoLive();
 
+  const liveIconStyles = useHMSRoomStyle((theme) => ({
+    tintColor: theme.palette.on_primary_low,
+  }));
+
   const disabledJoin = userNameInvalid || loading;
 
   return (
-    <TouchableHighlight
-      underlayColor={COLORS.PRIMARY.DARK}
-      style={[styles.button, disabledJoin ? styles.disabledButton : null]}
+    <HMSPrimaryButton
+      loading={loading}
       onPress={onJoin}
+      title={
+        shouldGoLive
+          ? joinButtonLabels.goLiveBtnLabel
+          : joinButtonLabels.joinBtnLabel
+      }
       disabled={disabledJoin}
-    >
-      <>
-        {loading ? (
-          <ActivityIndicator
-            size={'small'}
-            color={COLORS.BASE.WHITE}
-            style={styles.loader}
-          />
-        ) : null}
-
-        {shouldGoLive ? (
-          <RadioIcon
-            style={[
-              loading ? styles.hiddenView : null,
-              disabledJoin ? styles.disabledIcon : null,
-            ]}
-          />
-        ) : null}
-
-        <Text
-          style={[
-            styles.text,
-            loading ? styles.hiddenView : null,
-            disabledJoin ? styles.disabledText : null,
-          ]}
-        >
-          {shouldGoLive ? 'Go Live' : 'Join Now'}
-        </Text>
-      </>
-    </TouchableHighlight>
+      leftComponent={
+        shouldGoLive ? (
+          <RadioIcon style={disabledJoin ? liveIconStyles : null} />
+        ) : null
+      }
+      style={styles.button}
+    />
   );
 };
 
 const styles = StyleSheet.create({
   button: {
-    flexDirection: 'row',
-    paddingHorizontal: 16,
-    paddingVertical: 8,
-    borderRadius: 8,
-    backgroundColor: COLORS.PRIMARY.DEFAULT,
     marginLeft: 16,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  text: {
-    color: COLORS.BASE.WHITE,
-    fontSize: 16,
-    fontFamily: 'Inter',
-    fontWeight: '600',
-    lineHeight: 24,
-    letterSpacing: 0.5,
-    marginHorizontal: 8,
-  },
-  loader: { position: 'absolute' },
-  disabledButton: {
-    backgroundColor: COLORS.PRIMARY.DISABLED,
-  },
-  disabledIcon: {
-    tintColor: COLORS.PRIMARY.ON_PRIMARY.LOW,
-  },
-  disabledText: {
-    color: COLORS.PRIMARY.ON_PRIMARY.LOW,
-  },
-  hiddenView: {
-    opacity: 0,
   },
 });

package/src/components/HMSPreviewNetworkQuality.tsx

@@ -3,9 +3,9 @@ import { View, StyleSheet } from 'react-native';
 import { useSelector } from 'react-redux';
 
 import { NetworkQualityIcon } from '../Icons';
-import { COLORS } from '..//utils/theme';
+import { hexToRgbA } from '../utils/theme';
 import type { RootState } from '../redux';
-import { useHMSInstance } from '../hooks-util';
+import { useHMSInstance, useHMSRoomStyle } from '../hooks-util';
 
 export const HMSPreviewNetworkQuality = () => {
   const hmsInstance = useHMSInstance();
@@ -20,8 +20,12 @@ export const HMSPreviewNetworkQuality = () => {
     return () => hmsInstance.disableNetworkQualityUpdates();
   }, []);
 
+  const containerStyles = useHMSRoomStyle((theme) => ({
+    backgroundColor: hexToRgbA(theme.palette.background_dim, 0.8),
+  }));
+
   return (
-    <View style={styles.container}>
+    <View style={[styles.container, containerStyles]}>
       <NetworkQualityIcon quality={localPeerNetworkQuality} />
     </View>
   );
@@ -34,7 +38,6 @@ const styles = StyleSheet.create({
     borderRadius: 8,
     paddingVertical: 4,
     paddingHorizontal: 8,
-    backgroundColor: COLORS.BACKGROUND.DIM_80,
     alignSelf: 'flex-start',
   },
 });