npm - @tactics/toddle-styleguide - Versions diffs - 5.3.1 → 5.3.3 - Mend

@tactics/toddle-styleguide 5.3.1 → 5.3.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (178) hide show

package/src/components/organisms/text-bubble/__snapshots__/text-bubble.test.js.snap DELETED Viewed

@@ -1,3046 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`test text-bubble given the bubbleAlignment is SENT return a text-bubble with right-bottom tip 1`] = `
-<View
-  style={
-    {
-      "gap": 4,
-      "width": "100%",
-    }
-  }
->
-  <View
-    style={
-      {
-        "minWidth": "50%",
-      }
-    }
-  >
-    <View
-      style={
-        {
-          "flexDirection": "row",
-          "gap": 12,
-        }
-      }
-    >
-      <View
-        style={
-          {
-            "justifyContent": "center",
-            "padding": 2,
-          }
-        }
-      >
-        <RNSVGSvgView
-          align="xMidYMid"
-          bbHeight="26"
-          bbWidth="26"
-          fill="none"
-          focusable={false}
-          height={26}
-          meetOrSlice={0}
-          minX={0}
-          minY={0}
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "borderWidth": 0,
-              },
-              {
-                "flex": 0,
-                "height": 26,
-                "width": 26,
-              },
-            ]
-          }
-          vbHeight={23}
-          vbWidth={22}
-          width={26}
-        >
-          <RNSVGGroup
-            fill={null}
-            propList={
-              [
-                "fill",
-              ]
-            }
-          >
-            <RNSVGPath
-              d="M11 7V11.5M11 16H11.0108M20.75 11.5C20.75 17.0919 16.3848 21.625 11 21.625C5.61522 21.625 1.25 17.0919 1.25 11.5C1.25 5.90812 5.61522 1.375 11 1.375C16.3848 1.375 20.75 5.90812 20.75 11.5Z"
-              fill={
-                {
-                  "payload": 4278190080,
-                  "type": 0,
-                }
-              }
-              propList={
-                [
-                  "stroke",
-                  "strokeWidth",
-                  "strokeLinecap",
-                  "strokeLinejoin",
-                ]
-              }
-              stroke={
-                {
-                  "payload": 4294010984,
-                  "type": 0,
-                }
-              }
-              strokeLinecap={1}
-              strokeLinejoin={1}
-              strokeWidth="2"
-            />
-          </RNSVGGroup>
-        </RNSVGSvgView>
-      </View>
-      <View
-        style={
-          {
-            "backgroundColor": "#F16868",
-            "borderBottomLeftRadius": 8,
-            "borderBottomRightRadius": 32,
-            "borderTopLeftRadius": 24,
-            "borderTopRightRadius": 24,
-            "flex": 1,
-            "justifyContent": "center",
-            "paddingBottom": 16,
-            "paddingLeft": 24,
-            "paddingRight": 24,
-            "paddingTop": 16,
-          }
-        }
-      >
-        <View
-          collapsable={false}
-          handlerTag={7}
-          handlerType="PanGestureHandler"
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onLayout={[Function]}
-          style={
-            {
-              "overflow": "hidden",
-            }
-          }
-        >
-          <View
-            collapsable={false}
-            style={
-              {
-                "bottom": 0,
-                "flexDirection": "row-reverse",
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-                "transform": [
-                  {
-                    "translateX": -10000,
-                  },
-                ],
-              }
-            }
-          >
-            <View
-              style={
-                {
-                  "alignItems": "center",
-                  "flex": 1,
-                  "flexDirection": "row",
-                  "justifyContent": "space-evenly",
-                }
-              }
-            >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "alignItems": "center",
-                    "justifyContent": "center",
-                    "opacity": 0,
-                  }
-                }
-              >
-                <View
-                  accessibilityState={
-                    {
-                      "busy": undefined,
-                      "checked": undefined,
-                      "disabled": undefined,
-                      "expanded": undefined,
-                      "selected": undefined,
-                    }
-                  }
-                  accessibilityValue={
-                    {
-                      "max": undefined,
-                      "min": undefined,
-                      "now": undefined,
-                      "text": undefined,
-                    }
-                  }
-                  accessible={true}
-                  collapsable={false}
-                  focusable={true}
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onResponderGrant={[Function]}
-                  onResponderMove={[Function]}
-                  onResponderRelease={[Function]}
-                  onResponderTerminate={[Function]}
-                  onResponderTerminationRequest={[Function]}
-                  onStartShouldSetResponder={[Function]}
-                  testID="refresh-button"
-                >
-                  <RNSVGSvgView
-                    align="xMidYMid"
-                    bbHeight="24"
-                    bbWidth="24"
-                    fill="none"
-                    focusable={false}
-                    height={24}
-                    meetOrSlice={0}
-                    minX={0}
-                    minY={0}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderWidth": 0,
-                        },
-                        {
-                          "flex": 0,
-                          "height": 24,
-                          "width": 24,
-                        },
-                      ]
-                    }
-                    vbHeight={18}
-                    vbWidth={16}
-                    width={24}
-                  >
-                    <RNSVGGroup
-                      fill={null}
-                      propList={
-                        [
-                          "fill",
-                        ]
-                      }
-                    >
-                      <RNSVGPath
-                        d="M1.40005 0.200012C2.00756 0.200012 2.50005 0.692499 2.50005 1.30001V3.61139C3.89715 2.18539 5.84462 1.30001 8.00005 1.30001C11.3544 1.30001 14.2051 3.44426 15.2616 6.43344C15.4641 7.00623 15.1639 7.63468 14.5911 7.83714C14.0183 8.03959 13.3898 7.73937 13.1874 7.16658C12.4318 5.02891 10.3931 3.50001 8.00005 3.50001C6.20162 3.50001 4.60329 4.36353 3.59934 5.70001H6.90005C7.50756 5.70001 8.00005 6.1925 8.00005 6.80001C8.00005 7.40752 7.50756 7.90001 6.90005 7.90001H1.40005C0.792536 7.90001 0.300049 7.40752 0.300049 6.80001V1.30001C0.300049 0.692499 0.792536 0.200012 1.40005 0.200012ZM1.40903 10.1629C1.98182 9.96044 2.61027 10.2607 2.81273 10.8334C3.56828 12.9711 5.60703 14.5 8.00005 14.5C9.79847 14.5 11.3968 13.6365 12.4008 12.3L9.10005 12.3C8.49254 12.3 8.00005 11.8075 8.00005 11.2C8.00005 10.5925 8.49254 10.1 9.10005 10.1H14.6C14.8918 10.1 15.1716 10.2159 15.3779 10.4222C15.5842 10.6285 15.7 10.9083 15.7 11.2V16.7C15.7 17.3075 15.2076 17.8 14.6 17.8C13.9925 17.8 13.5 17.3075 13.5 16.7V14.3886C12.1029 15.8146 10.1555 16.7 8.00005 16.7C4.6457 16.7 1.795 14.5558 0.738478 11.5666C0.536026 10.9938 0.836243 10.3653 1.40903 10.1629Z"
-                        fill={
-                          {
-                            "payload": 4294695385,
-                            "type": 0,
-                          }
-                        }
-                        propList={
-                          [
-                            "fill",
-                          ]
-                        }
-                      />
-                    </RNSVGGroup>
-                  </RNSVGSvgView>
-                </View>
-              </View>
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "alignItems": "center",
-                    "justifyContent": "center",
-                    "opacity": 0,
-                  }
-                }
-              >
-                <View
-                  accessibilityState={
-                    {
-                      "busy": undefined,
-                      "checked": undefined,
-                      "disabled": undefined,
-                      "expanded": undefined,
-                      "selected": undefined,
-                    }
-                  }
-                  accessibilityValue={
-                    {
-                      "max": undefined,
-                      "min": undefined,
-                      "now": undefined,
-                      "text": undefined,
-                    }
-                  }
-                  accessible={true}
-                  collapsable={false}
-                  focusable={true}
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onResponderGrant={[Function]}
-                  onResponderMove={[Function]}
-                  onResponderRelease={[Function]}
-                  onResponderTerminate={[Function]}
-                  onResponderTerminationRequest={[Function]}
-                  onStartShouldSetResponder={[Function]}
-                  testID="delete-button"
-                >
-                  <RNSVGSvgView
-                    align="xMidYMid"
-                    bbHeight="24"
-                    bbWidth="24"
-                    fill="none"
-                    focusable={false}
-                    height={24}
-                    meetOrSlice={0}
-                    minX={0}
-                    minY={0}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderWidth": 0,
-                        },
-                        {
-                          "flex": 0,
-                          "height": 24,
-                          "width": 24,
-                        },
-                      ]
-                    }
-                    vbHeight={18}
-                    vbWidth={17}
-                    width={24}
-                  >
-                    <RNSVGGroup
-                      fill={null}
-                      propList={
-                        [
-                          "fill",
-                        ]
-                      }
-                    >
-                      <RNSVGPath
-                        clipRule={0}
-                        d="M7.34995 0.200012C6.91436 0.200012 6.51616 0.435415 6.32136 0.808077L5.48921 2.40001H1.59995C0.964824 2.40001 0.449951 2.8925 0.449951 3.50001C0.449951 4.10753 0.964824 4.60001 1.59995 4.60001L1.59995 15.6C1.59995 16.815 2.6297 17.8 3.89995 17.8H13.1C14.3702 17.8 15.4 16.815 15.4 15.6V4.60001C16.0351 4.60001 16.55 4.10753 16.55 3.50001C16.55 2.8925 16.0351 2.40001 15.4 2.40001H11.5107L10.6785 0.808077C10.4837 0.435415 10.0855 0.200012 9.64995 0.200012H7.34995ZM5.04995 6.80001C5.04995 6.1925 5.56482 5.70001 6.19995 5.70001C6.83508 5.70001 7.34995 6.1925 7.34995 6.80001V13.4C7.34995 14.0075 6.83508 14.5 6.19995 14.5C5.56482 14.5 5.04995 14.0075 5.04995 13.4V6.80001ZM10.8 5.70001C10.1648 5.70001 9.64995 6.1925 9.64995 6.80001V13.4C9.64995 14.0075 10.1648 14.5 10.8 14.5C11.4351 14.5 11.95 14.0075 11.95 13.4V6.80001C11.95 6.1925 11.4351 5.70001 10.8 5.70001Z"
-                        fill={
-                          {
-                            "payload": 4294695385,
-                            "type": 0,
-                          }
-                        }
-                        fillRule={0}
-                        propList={
-                          [
-                            "fill",
-                            "fillRule",
-                          ]
-                        }
-                      />
-                    </RNSVGGroup>
-                  </RNSVGSvgView>
-                </View>
-              </View>
-            </View>
-            <View
-              onLayout={[Function]}
-            />
-          </View>
-          <View
-            collapsable={false}
-            handlerTag={8}
-            handlerType="TapGestureHandler"
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            pointerEvents="auto"
-            style={
-              {
-                "transform": [
-                  {
-                    "translateX": -0,
-                  },
-                ],
-              }
-            }
-          >
-            <Text
-              style={
-                [
-                  [
-                    {
-                      "fontFamily": "Montserrat",
-                      "fontSize": 13,
-                      "lineHeight": 20.4,
-                    },
-                  ],
-                  {
-                    "color": "#FFFFFF",
-                    "textAlign": undefined,
-                    "width": "100%",
-                  },
-                  {
-                    "backgroundColor": "#F16868",
-                    "minHeight": 30,
-                    "textAlignVertical": "center",
-                  },
-                ]
-              }
-            >
-              TEST Bubble
-            </Text>
-          </View>
-        </View>
-      </View>
-    </View>
-  </View>
-  <View
-    style={
-      {
-        "alignSelf": "flex-end",
-        "marginBottom": 2,
-      }
-    }
-  >
-    <Text
-      style={
-        [
-          [
-            {
-              "fontFamily": "Montserrat",
-              "fontSize": 13,
-              "lineHeight": 20.4,
-            },
-          ],
-          {
-            "color": "#9AA5B1",
-            "textAlign": "right",
-            "width": "100%",
-          },
-          {
-            "textAlignVertical": "center",
-          },
-        ]
-      }
-    >
-      25 May, 9:08
-    </Text>
-  </View>
-</View>
-`;
-exports[`test text-bubble given the visualState is DEFAULT return a light-blue colored text-bubble AND dark green text 1`] = `
-<View
-  style={
-    {
-      "gap": 4,
-      "width": "100%",
-    }
-  }
->
-  <View
-    style={
-      {
-        "minWidth": "50%",
-      }
-    }
-  >
-    <View
-      style={
-        {
-          "flexDirection": "row",
-          "gap": 12,
-        }
-      }
-    >
-      <View
-        style={
-          {
-            "justifyContent": "center",
-            "padding": 2,
-          }
-        }
-      >
-        <RNSVGSvgView
-          align="xMidYMid"
-          bbHeight="26"
-          bbWidth="26"
-          fill="none"
-          focusable={false}
-          height={26}
-          meetOrSlice={0}
-          minX={0}
-          minY={0}
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "borderWidth": 0,
-              },
-              {
-                "flex": 0,
-                "height": 26,
-                "width": 26,
-              },
-            ]
-          }
-          vbHeight={23}
-          vbWidth={22}
-          width={26}
-        >
-          <RNSVGGroup
-            fill={null}
-            propList={
-              [
-                "fill",
-              ]
-            }
-          >
-            <RNSVGPath
-              d="M11 7V11.5M11 16H11.0108M20.75 11.5C20.75 17.0919 16.3848 21.625 11 21.625C5.61522 21.625 1.25 17.0919 1.25 11.5C1.25 5.90812 5.61522 1.375 11 1.375C16.3848 1.375 20.75 5.90812 20.75 11.5Z"
-              fill={
-                {
-                  "payload": 4278190080,
-                  "type": 0,
-                }
-              }
-              propList={
-                [
-                  "stroke",
-                  "strokeWidth",
-                  "strokeLinecap",
-                  "strokeLinejoin",
-                ]
-              }
-              stroke={
-                {
-                  "payload": 4294010984,
-                  "type": 0,
-                }
-              }
-              strokeLinecap={1}
-              strokeLinejoin={1}
-              strokeWidth="2"
-            />
-          </RNSVGGroup>
-        </RNSVGSvgView>
-      </View>
-      <View
-        style={
-          {
-            "backgroundColor": "#F16868",
-            "borderBottomLeftRadius": 8,
-            "borderBottomRightRadius": 32,
-            "borderTopLeftRadius": 24,
-            "borderTopRightRadius": 24,
-            "flex": 1,
-            "justifyContent": "center",
-            "paddingBottom": 16,
-            "paddingLeft": 24,
-            "paddingRight": 24,
-            "paddingTop": 16,
-          }
-        }
-      >
-        <View
-          collapsable={false}
-          handlerTag={5}
-          handlerType="PanGestureHandler"
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onLayout={[Function]}
-          style={
-            {
-              "overflow": "hidden",
-            }
-          }
-        >
-          <View
-            collapsable={false}
-            style={
-              {
-                "bottom": 0,
-                "flexDirection": "row-reverse",
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-                "transform": [
-                  {
-                    "translateX": -10000,
-                  },
-                ],
-              }
-            }
-          >
-            <View
-              style={
-                {
-                  "alignItems": "center",
-                  "flex": 1,
-                  "flexDirection": "row",
-                  "justifyContent": "space-evenly",
-                }
-              }
-            >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "alignItems": "center",
-                    "justifyContent": "center",
-                    "opacity": 0,
-                  }
-                }
-              >
-                <View
-                  accessibilityState={
-                    {
-                      "busy": undefined,
-                      "checked": undefined,
-                      "disabled": undefined,
-                      "expanded": undefined,
-                      "selected": undefined,
-                    }
-                  }
-                  accessibilityValue={
-                    {
-                      "max": undefined,
-                      "min": undefined,
-                      "now": undefined,
-                      "text": undefined,
-                    }
-                  }
-                  accessible={true}
-                  collapsable={false}
-                  focusable={true}
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onResponderGrant={[Function]}
-                  onResponderMove={[Function]}
-                  onResponderRelease={[Function]}
-                  onResponderTerminate={[Function]}
-                  onResponderTerminationRequest={[Function]}
-                  onStartShouldSetResponder={[Function]}
-                  testID="refresh-button"
-                >
-                  <RNSVGSvgView
-                    align="xMidYMid"
-                    bbHeight="24"
-                    bbWidth="24"
-                    fill="none"
-                    focusable={false}
-                    height={24}
-                    meetOrSlice={0}
-                    minX={0}
-                    minY={0}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderWidth": 0,
-                        },
-                        {
-                          "flex": 0,
-                          "height": 24,
-                          "width": 24,
-                        },
-                      ]
-                    }
-                    vbHeight={18}
-                    vbWidth={16}
-                    width={24}
-                  >
-                    <RNSVGGroup
-                      fill={null}
-                      propList={
-                        [
-                          "fill",
-                        ]
-                      }
-                    >
-                      <RNSVGPath
-                        d="M1.40005 0.200012C2.00756 0.200012 2.50005 0.692499 2.50005 1.30001V3.61139C3.89715 2.18539 5.84462 1.30001 8.00005 1.30001C11.3544 1.30001 14.2051 3.44426 15.2616 6.43344C15.4641 7.00623 15.1639 7.63468 14.5911 7.83714C14.0183 8.03959 13.3898 7.73937 13.1874 7.16658C12.4318 5.02891 10.3931 3.50001 8.00005 3.50001C6.20162 3.50001 4.60329 4.36353 3.59934 5.70001H6.90005C7.50756 5.70001 8.00005 6.1925 8.00005 6.80001C8.00005 7.40752 7.50756 7.90001 6.90005 7.90001H1.40005C0.792536 7.90001 0.300049 7.40752 0.300049 6.80001V1.30001C0.300049 0.692499 0.792536 0.200012 1.40005 0.200012ZM1.40903 10.1629C1.98182 9.96044 2.61027 10.2607 2.81273 10.8334C3.56828 12.9711 5.60703 14.5 8.00005 14.5C9.79847 14.5 11.3968 13.6365 12.4008 12.3L9.10005 12.3C8.49254 12.3 8.00005 11.8075 8.00005 11.2C8.00005 10.5925 8.49254 10.1 9.10005 10.1H14.6C14.8918 10.1 15.1716 10.2159 15.3779 10.4222C15.5842 10.6285 15.7 10.9083 15.7 11.2V16.7C15.7 17.3075 15.2076 17.8 14.6 17.8C13.9925 17.8 13.5 17.3075 13.5 16.7V14.3886C12.1029 15.8146 10.1555 16.7 8.00005 16.7C4.6457 16.7 1.795 14.5558 0.738478 11.5666C0.536026 10.9938 0.836243 10.3653 1.40903 10.1629Z"
-                        fill={
-                          {
-                            "payload": 4294695385,
-                            "type": 0,
-                          }
-                        }
-                        propList={
-                          [
-                            "fill",
-                          ]
-                        }
-                      />
-                    </RNSVGGroup>
-                  </RNSVGSvgView>
-                </View>
-              </View>
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "alignItems": "center",
-                    "justifyContent": "center",
-                    "opacity": 0,
-                  }
-                }
-              >
-                <View
-                  accessibilityState={
-                    {
-                      "busy": undefined,
-                      "checked": undefined,
-                      "disabled": undefined,
-                      "expanded": undefined,
-                      "selected": undefined,
-                    }
-                  }
-                  accessibilityValue={
-                    {
-                      "max": undefined,
-                      "min": undefined,
-                      "now": undefined,
-                      "text": undefined,
-                    }
-                  }
-                  accessible={true}
-                  collapsable={false}
-                  focusable={true}
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onResponderGrant={[Function]}
-                  onResponderMove={[Function]}
-                  onResponderRelease={[Function]}
-                  onResponderTerminate={[Function]}
-                  onResponderTerminationRequest={[Function]}
-                  onStartShouldSetResponder={[Function]}
-                  testID="delete-button"
-                >
-                  <RNSVGSvgView
-                    align="xMidYMid"
-                    bbHeight="24"
-                    bbWidth="24"
-                    fill="none"
-                    focusable={false}
-                    height={24}
-                    meetOrSlice={0}
-                    minX={0}
-                    minY={0}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderWidth": 0,
-                        },
-                        {
-                          "flex": 0,
-                          "height": 24,
-                          "width": 24,
-                        },
-                      ]
-                    }
-                    vbHeight={18}
-                    vbWidth={17}
-                    width={24}
-                  >
-                    <RNSVGGroup
-                      fill={null}
-                      propList={
-                        [
-                          "fill",
-                        ]
-                      }
-                    >
-                      <RNSVGPath
-                        clipRule={0}
-                        d="M7.34995 0.200012C6.91436 0.200012 6.51616 0.435415 6.32136 0.808077L5.48921 2.40001H1.59995C0.964824 2.40001 0.449951 2.8925 0.449951 3.50001C0.449951 4.10753 0.964824 4.60001 1.59995 4.60001L1.59995 15.6C1.59995 16.815 2.6297 17.8 3.89995 17.8H13.1C14.3702 17.8 15.4 16.815 15.4 15.6V4.60001C16.0351 4.60001 16.55 4.10753 16.55 3.50001C16.55 2.8925 16.0351 2.40001 15.4 2.40001H11.5107L10.6785 0.808077C10.4837 0.435415 10.0855 0.200012 9.64995 0.200012H7.34995ZM5.04995 6.80001C5.04995 6.1925 5.56482 5.70001 6.19995 5.70001C6.83508 5.70001 7.34995 6.1925 7.34995 6.80001V13.4C7.34995 14.0075 6.83508 14.5 6.19995 14.5C5.56482 14.5 5.04995 14.0075 5.04995 13.4V6.80001ZM10.8 5.70001C10.1648 5.70001 9.64995 6.1925 9.64995 6.80001V13.4C9.64995 14.0075 10.1648 14.5 10.8 14.5C11.4351 14.5 11.95 14.0075 11.95 13.4V6.80001C11.95 6.1925 11.4351 5.70001 10.8 5.70001Z"
-                        fill={
-                          {
-                            "payload": 4294695385,
-                            "type": 0,
-                          }
-                        }
-                        fillRule={0}
-                        propList={
-                          [
-                            "fill",
-                            "fillRule",
-                          ]
-                        }
-                      />
-                    </RNSVGGroup>
-                  </RNSVGSvgView>
-                </View>
-              </View>
-            </View>
-            <View
-              onLayout={[Function]}
-            />
-          </View>
-          <View
-            collapsable={false}
-            handlerTag={6}
-            handlerType="TapGestureHandler"
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            pointerEvents="auto"
-            style={
-              {
-                "transform": [
-                  {
-                    "translateX": -0,
-                  },
-                ],
-              }
-            }
-          >
-            <Text
-              style={
-                [
-                  [
-                    {
-                      "fontFamily": "Montserrat",
-                      "fontSize": 13,
-                      "lineHeight": 20.4,
-                    },
-                  ],
-                  {
-                    "color": "#FFFFFF",
-                    "textAlign": undefined,
-                    "width": "100%",
-                  },
-                  {
-                    "backgroundColor": "#F16868",
-                    "minHeight": 30,
-                    "textAlignVertical": "center",
-                  },
-                ]
-              }
-            >
-              TEST color
-            </Text>
-          </View>
-        </View>
-      </View>
-    </View>
-  </View>
-  <View
-    style={
-      {
-        "alignSelf": "flex-end",
-        "marginBottom": 2,
-      }
-    }
-  >
-    <Text
-      style={
-        [
-          [
-            {
-              "fontFamily": "Montserrat",
-              "fontSize": 13,
-              "lineHeight": 20.4,
-            },
-          ],
-          {
-            "color": "#9AA5B1",
-            "textAlign": "right",
-            "width": "100%",
-          },
-          {
-            "textAlignVertical": "center",
-          },
-        ]
-      }
-    >
-      25 May, 9:08
-    </Text>
-  </View>
-</View>
-`;
-exports[`test text-bubble given the visualState is ERROR return a red colored text-bubble AND white text 1`] = `
-<View
-  style={
-    {
-      "gap": 4,
-      "width": "100%",
-    }
-  }
->
-  <View
-    style={
-      {
-        "minWidth": "50%",
-      }
-    }
-  >
-    <View
-      style={
-        {
-          "flexDirection": "row",
-          "gap": 12,
-        }
-      }
-    >
-      <View
-        style={
-          {
-            "justifyContent": "center",
-            "padding": 2,
-          }
-        }
-      >
-        <RNSVGSvgView
-          align="xMidYMid"
-          bbHeight="26"
-          bbWidth="26"
-          fill="none"
-          focusable={false}
-          height={26}
-          meetOrSlice={0}
-          minX={0}
-          minY={0}
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "borderWidth": 0,
-              },
-              {
-                "flex": 0,
-                "height": 26,
-                "width": 26,
-              },
-            ]
-          }
-          vbHeight={23}
-          vbWidth={22}
-          width={26}
-        >
-          <RNSVGGroup
-            fill={null}
-            propList={
-              [
-                "fill",
-              ]
-            }
-          >
-            <RNSVGPath
-              d="M11 7V11.5M11 16H11.0108M20.75 11.5C20.75 17.0919 16.3848 21.625 11 21.625C5.61522 21.625 1.25 17.0919 1.25 11.5C1.25 5.90812 5.61522 1.375 11 1.375C16.3848 1.375 20.75 5.90812 20.75 11.5Z"
-              fill={
-                {
-                  "payload": 4278190080,
-                  "type": 0,
-                }
-              }
-              propList={
-                [
-                  "stroke",
-                  "strokeWidth",
-                  "strokeLinecap",
-                  "strokeLinejoin",
-                ]
-              }
-              stroke={
-                {
-                  "payload": 4294010984,
-                  "type": 0,
-                }
-              }
-              strokeLinecap={1}
-              strokeLinejoin={1}
-              strokeWidth="2"
-            />
-          </RNSVGGroup>
-        </RNSVGSvgView>
-      </View>
-      <View
-        style={
-          {
-            "backgroundColor": "#F16868",
-            "borderBottomLeftRadius": 8,
-            "borderBottomRightRadius": 32,
-            "borderTopLeftRadius": 24,
-            "borderTopRightRadius": 24,
-            "flex": 1,
-            "justifyContent": "center",
-            "paddingBottom": 16,
-            "paddingLeft": 24,
-            "paddingRight": 24,
-            "paddingTop": 16,
-          }
-        }
-      >
-        <View
-          collapsable={false}
-          handlerTag={1}
-          handlerType="PanGestureHandler"
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onLayout={[Function]}
-          style={
-            {
-              "overflow": "hidden",
-            }
-          }
-        >
-          <View
-            collapsable={false}
-            style={
-              {
-                "bottom": 0,
-                "flexDirection": "row-reverse",
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-                "transform": [
-                  {
-                    "translateX": -10000,
-                  },
-                ],
-              }
-            }
-          >
-            <View
-              style={
-                {
-                  "alignItems": "center",
-                  "flex": 1,
-                  "flexDirection": "row",
-                  "justifyContent": "space-evenly",
-                }
-              }
-            >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "alignItems": "center",
-                    "justifyContent": "center",
-                    "opacity": 0,
-                  }
-                }
-              >
-                <View
-                  accessibilityState={
-                    {
-                      "busy": undefined,
-                      "checked": undefined,
-                      "disabled": undefined,
-                      "expanded": undefined,
-                      "selected": undefined,
-                    }
-                  }
-                  accessibilityValue={
-                    {
-                      "max": undefined,
-                      "min": undefined,
-                      "now": undefined,
-                      "text": undefined,
-                    }
-                  }
-                  accessible={true}
-                  collapsable={false}
-                  focusable={true}
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onResponderGrant={[Function]}
-                  onResponderMove={[Function]}
-                  onResponderRelease={[Function]}
-                  onResponderTerminate={[Function]}
-                  onResponderTerminationRequest={[Function]}
-                  onStartShouldSetResponder={[Function]}
-                  testID="refresh-button"
-                >
-                  <RNSVGSvgView
-                    align="xMidYMid"
-                    bbHeight="24"
-                    bbWidth="24"
-                    fill="none"
-                    focusable={false}
-                    height={24}
-                    meetOrSlice={0}
-                    minX={0}
-                    minY={0}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderWidth": 0,
-                        },
-                        {
-                          "flex": 0,
-                          "height": 24,
-                          "width": 24,
-                        },
-                      ]
-                    }
-                    vbHeight={18}
-                    vbWidth={16}
-                    width={24}
-                  >
-                    <RNSVGGroup
-                      fill={null}
-                      propList={
-                        [
-                          "fill",
-                        ]
-                      }
-                    >
-                      <RNSVGPath
-                        d="M1.40005 0.200012C2.00756 0.200012 2.50005 0.692499 2.50005 1.30001V3.61139C3.89715 2.18539 5.84462 1.30001 8.00005 1.30001C11.3544 1.30001 14.2051 3.44426 15.2616 6.43344C15.4641 7.00623 15.1639 7.63468 14.5911 7.83714C14.0183 8.03959 13.3898 7.73937 13.1874 7.16658C12.4318 5.02891 10.3931 3.50001 8.00005 3.50001C6.20162 3.50001 4.60329 4.36353 3.59934 5.70001H6.90005C7.50756 5.70001 8.00005 6.1925 8.00005 6.80001C8.00005 7.40752 7.50756 7.90001 6.90005 7.90001H1.40005C0.792536 7.90001 0.300049 7.40752 0.300049 6.80001V1.30001C0.300049 0.692499 0.792536 0.200012 1.40005 0.200012ZM1.40903 10.1629C1.98182 9.96044 2.61027 10.2607 2.81273 10.8334C3.56828 12.9711 5.60703 14.5 8.00005 14.5C9.79847 14.5 11.3968 13.6365 12.4008 12.3L9.10005 12.3C8.49254 12.3 8.00005 11.8075 8.00005 11.2C8.00005 10.5925 8.49254 10.1 9.10005 10.1H14.6C14.8918 10.1 15.1716 10.2159 15.3779 10.4222C15.5842 10.6285 15.7 10.9083 15.7 11.2V16.7C15.7 17.3075 15.2076 17.8 14.6 17.8C13.9925 17.8 13.5 17.3075 13.5 16.7V14.3886C12.1029 15.8146 10.1555 16.7 8.00005 16.7C4.6457 16.7 1.795 14.5558 0.738478 11.5666C0.536026 10.9938 0.836243 10.3653 1.40903 10.1629Z"
-                        fill={
-                          {
-                            "payload": 4294695385,
-                            "type": 0,
-                          }
-                        }
-                        propList={
-                          [
-                            "fill",
-                          ]
-                        }
-                      />
-                    </RNSVGGroup>
-                  </RNSVGSvgView>
-                </View>
-              </View>
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "alignItems": "center",
-                    "justifyContent": "center",
-                    "opacity": 0,
-                  }
-                }
-              >
-                <View
-                  accessibilityState={
-                    {
-                      "busy": undefined,
-                      "checked": undefined,
-                      "disabled": undefined,
-                      "expanded": undefined,
-                      "selected": undefined,
-                    }
-                  }
-                  accessibilityValue={
-                    {
-                      "max": undefined,
-                      "min": undefined,
-                      "now": undefined,
-                      "text": undefined,
-                    }
-                  }
-                  accessible={true}
-                  collapsable={false}
-                  focusable={true}
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onResponderGrant={[Function]}
-                  onResponderMove={[Function]}
-                  onResponderRelease={[Function]}
-                  onResponderTerminate={[Function]}
-                  onResponderTerminationRequest={[Function]}
-                  onStartShouldSetResponder={[Function]}
-                  testID="delete-button"
-                >
-                  <RNSVGSvgView
-                    align="xMidYMid"
-                    bbHeight="24"
-                    bbWidth="24"
-                    fill="none"
-                    focusable={false}
-                    height={24}
-                    meetOrSlice={0}
-                    minX={0}
-                    minY={0}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderWidth": 0,
-                        },
-                        {
-                          "flex": 0,
-                          "height": 24,
-                          "width": 24,
-                        },
-                      ]
-                    }
-                    vbHeight={18}
-                    vbWidth={17}
-                    width={24}
-                  >
-                    <RNSVGGroup
-                      fill={null}
-                      propList={
-                        [
-                          "fill",
-                        ]
-                      }
-                    >
-                      <RNSVGPath
-                        clipRule={0}
-                        d="M7.34995 0.200012C6.91436 0.200012 6.51616 0.435415 6.32136 0.808077L5.48921 2.40001H1.59995C0.964824 2.40001 0.449951 2.8925 0.449951 3.50001C0.449951 4.10753 0.964824 4.60001 1.59995 4.60001L1.59995 15.6C1.59995 16.815 2.6297 17.8 3.89995 17.8H13.1C14.3702 17.8 15.4 16.815 15.4 15.6V4.60001C16.0351 4.60001 16.55 4.10753 16.55 3.50001C16.55 2.8925 16.0351 2.40001 15.4 2.40001H11.5107L10.6785 0.808077C10.4837 0.435415 10.0855 0.200012 9.64995 0.200012H7.34995ZM5.04995 6.80001C5.04995 6.1925 5.56482 5.70001 6.19995 5.70001C6.83508 5.70001 7.34995 6.1925 7.34995 6.80001V13.4C7.34995 14.0075 6.83508 14.5 6.19995 14.5C5.56482 14.5 5.04995 14.0075 5.04995 13.4V6.80001ZM10.8 5.70001C10.1648 5.70001 9.64995 6.1925 9.64995 6.80001V13.4C9.64995 14.0075 10.1648 14.5 10.8 14.5C11.4351 14.5 11.95 14.0075 11.95 13.4V6.80001C11.95 6.1925 11.4351 5.70001 10.8 5.70001Z"
-                        fill={
-                          {
-                            "payload": 4294695385,
-                            "type": 0,
-                          }
-                        }
-                        fillRule={0}
-                        propList={
-                          [
-                            "fill",
-                            "fillRule",
-                          ]
-                        }
-                      />
-                    </RNSVGGroup>
-                  </RNSVGSvgView>
-                </View>
-              </View>
-            </View>
-            <View
-              onLayout={[Function]}
-            />
-          </View>
-          <View
-            collapsable={false}
-            handlerTag={2}
-            handlerType="TapGestureHandler"
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            pointerEvents="auto"
-            style={
-              {
-                "transform": [
-                  {
-                    "translateX": -0,
-                  },
-                ],
-              }
-            }
-          >
-            <Text
-              style={
-                [
-                  [
-                    {
-                      "fontFamily": "Montserrat",
-                      "fontSize": 13,
-                      "lineHeight": 20.4,
-                    },
-                  ],
-                  {
-                    "color": "#FFFFFF",
-                    "textAlign": undefined,
-                    "width": "100%",
-                  },
-                  {
-                    "backgroundColor": "#F16868",
-                    "minHeight": 30,
-                    "textAlignVertical": "center",
-                  },
-                ]
-              }
-            >
-              TEST color
-            </Text>
-          </View>
-        </View>
-      </View>
-    </View>
-  </View>
-  <View
-    style={
-      {
-        "alignSelf": "flex-end",
-        "marginBottom": 2,
-      }
-    }
-  >
-    <Text
-      style={
-        [
-          [
-            {
-              "fontFamily": "Montserrat",
-              "fontSize": 13,
-              "lineHeight": 20.4,
-            },
-          ],
-          {
-            "color": "#9AA5B1",
-            "textAlign": "right",
-            "width": "100%",
-          },
-          {
-            "textAlignVertical": "center",
-          },
-        ]
-      }
-    >
-      25 May, 9:08
-    </Text>
-  </View>
-</View>
-`;
-exports[`test text-bubble given the visualState is RECEIVE return a text-bubble with left-bottom tip 1`] = `
-<View
-  style={
-    {
-      "gap": 4,
-      "width": "100%",
-    }
-  }
->
-  <View
-    style={
-      {
-        "minWidth": "50%",
-      }
-    }
-  >
-    <View
-      style={
-        {
-          "flexDirection": "row",
-          "gap": 12,
-        }
-      }
-    >
-      <View
-        style={
-          {
-            "justifyContent": "center",
-            "padding": 2,
-          }
-        }
-      >
-        <RNSVGSvgView
-          align="xMidYMid"
-          bbHeight="26"
-          bbWidth="26"
-          fill="none"
-          focusable={false}
-          height={26}
-          meetOrSlice={0}
-          minX={0}
-          minY={0}
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "borderWidth": 0,
-              },
-              {
-                "flex": 0,
-                "height": 26,
-                "width": 26,
-              },
-            ]
-          }
-          vbHeight={23}
-          vbWidth={22}
-          width={26}
-        >
-          <RNSVGGroup
-            fill={null}
-            propList={
-              [
-                "fill",
-              ]
-            }
-          >
-            <RNSVGPath
-              d="M11 7V11.5M11 16H11.0108M20.75 11.5C20.75 17.0919 16.3848 21.625 11 21.625C5.61522 21.625 1.25 17.0919 1.25 11.5C1.25 5.90812 5.61522 1.375 11 1.375C16.3848 1.375 20.75 5.90812 20.75 11.5Z"
-              fill={
-                {
-                  "payload": 4278190080,
-                  "type": 0,
-                }
-              }
-              propList={
-                [
-                  "stroke",
-                  "strokeWidth",
-                  "strokeLinecap",
-                  "strokeLinejoin",
-                ]
-              }
-              stroke={
-                {
-                  "payload": 4294010984,
-                  "type": 0,
-                }
-              }
-              strokeLinecap={1}
-              strokeLinejoin={1}
-              strokeWidth="2"
-            />
-          </RNSVGGroup>
-        </RNSVGSvgView>
-      </View>
-      <View
-        style={
-          {
-            "backgroundColor": "#F16868",
-            "borderBottomLeftRadius": 8,
-            "borderBottomRightRadius": 32,
-            "borderTopLeftRadius": 24,
-            "borderTopRightRadius": 24,
-            "flex": 1,
-            "justifyContent": "center",
-            "paddingBottom": 16,
-            "paddingLeft": 24,
-            "paddingRight": 24,
-            "paddingTop": 16,
-          }
-        }
-      >
-        <View
-          collapsable={false}
-          handlerTag={9}
-          handlerType="PanGestureHandler"
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onLayout={[Function]}
-          style={
-            {
-              "overflow": "hidden",
-            }
-          }
-        >
-          <View
-            collapsable={false}
-            style={
-              {
-                "bottom": 0,
-                "flexDirection": "row-reverse",
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-                "transform": [
-                  {
-                    "translateX": -10000,
-                  },
-                ],
-              }
-            }
-          >
-            <View
-              style={
-                {
-                  "alignItems": "center",
-                  "flex": 1,
-                  "flexDirection": "row",
-                  "justifyContent": "space-evenly",
-                }
-              }
-            >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "alignItems": "center",
-                    "justifyContent": "center",
-                    "opacity": 0,
-                  }
-                }
-              >
-                <View
-                  accessibilityState={
-                    {
-                      "busy": undefined,
-                      "checked": undefined,
-                      "disabled": undefined,
-                      "expanded": undefined,
-                      "selected": undefined,
-                    }
-                  }
-                  accessibilityValue={
-                    {
-                      "max": undefined,
-                      "min": undefined,
-                      "now": undefined,
-                      "text": undefined,
-                    }
-                  }
-                  accessible={true}
-                  collapsable={false}
-                  focusable={true}
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onResponderGrant={[Function]}
-                  onResponderMove={[Function]}
-                  onResponderRelease={[Function]}
-                  onResponderTerminate={[Function]}
-                  onResponderTerminationRequest={[Function]}
-                  onStartShouldSetResponder={[Function]}
-                  testID="refresh-button"
-                >
-                  <RNSVGSvgView
-                    align="xMidYMid"
-                    bbHeight="24"
-                    bbWidth="24"
-                    fill="none"
-                    focusable={false}
-                    height={24}
-                    meetOrSlice={0}
-                    minX={0}
-                    minY={0}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderWidth": 0,
-                        },
-                        {
-                          "flex": 0,
-                          "height": 24,
-                          "width": 24,
-                        },
-                      ]
-                    }
-                    vbHeight={18}
-                    vbWidth={16}
-                    width={24}
-                  >
-                    <RNSVGGroup
-                      fill={null}
-                      propList={
-                        [
-                          "fill",
-                        ]
-                      }
-                    >
-                      <RNSVGPath
-                        d="M1.40005 0.200012C2.00756 0.200012 2.50005 0.692499 2.50005 1.30001V3.61139C3.89715 2.18539 5.84462 1.30001 8.00005 1.30001C11.3544 1.30001 14.2051 3.44426 15.2616 6.43344C15.4641 7.00623 15.1639 7.63468 14.5911 7.83714C14.0183 8.03959 13.3898 7.73937 13.1874 7.16658C12.4318 5.02891 10.3931 3.50001 8.00005 3.50001C6.20162 3.50001 4.60329 4.36353 3.59934 5.70001H6.90005C7.50756 5.70001 8.00005 6.1925 8.00005 6.80001C8.00005 7.40752 7.50756 7.90001 6.90005 7.90001H1.40005C0.792536 7.90001 0.300049 7.40752 0.300049 6.80001V1.30001C0.300049 0.692499 0.792536 0.200012 1.40005 0.200012ZM1.40903 10.1629C1.98182 9.96044 2.61027 10.2607 2.81273 10.8334C3.56828 12.9711 5.60703 14.5 8.00005 14.5C9.79847 14.5 11.3968 13.6365 12.4008 12.3L9.10005 12.3C8.49254 12.3 8.00005 11.8075 8.00005 11.2C8.00005 10.5925 8.49254 10.1 9.10005 10.1H14.6C14.8918 10.1 15.1716 10.2159 15.3779 10.4222C15.5842 10.6285 15.7 10.9083 15.7 11.2V16.7C15.7 17.3075 15.2076 17.8 14.6 17.8C13.9925 17.8 13.5 17.3075 13.5 16.7V14.3886C12.1029 15.8146 10.1555 16.7 8.00005 16.7C4.6457 16.7 1.795 14.5558 0.738478 11.5666C0.536026 10.9938 0.836243 10.3653 1.40903 10.1629Z"
-                        fill={
-                          {
-                            "payload": 4294695385,
-                            "type": 0,
-                          }
-                        }
-                        propList={
-                          [
-                            "fill",
-                          ]
-                        }
-                      />
-                    </RNSVGGroup>
-                  </RNSVGSvgView>
-                </View>
-              </View>
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "alignItems": "center",
-                    "justifyContent": "center",
-                    "opacity": 0,
-                  }
-                }
-              >
-                <View
-                  accessibilityState={
-                    {
-                      "busy": undefined,
-                      "checked": undefined,
-                      "disabled": undefined,
-                      "expanded": undefined,
-                      "selected": undefined,
-                    }
-                  }
-                  accessibilityValue={
-                    {
-                      "max": undefined,
-                      "min": undefined,
-                      "now": undefined,
-                      "text": undefined,
-                    }
-                  }
-                  accessible={true}
-                  collapsable={false}
-                  focusable={true}
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onResponderGrant={[Function]}
-                  onResponderMove={[Function]}
-                  onResponderRelease={[Function]}
-                  onResponderTerminate={[Function]}
-                  onResponderTerminationRequest={[Function]}
-                  onStartShouldSetResponder={[Function]}
-                  testID="delete-button"
-                >
-                  <RNSVGSvgView
-                    align="xMidYMid"
-                    bbHeight="24"
-                    bbWidth="24"
-                    fill="none"
-                    focusable={false}
-                    height={24}
-                    meetOrSlice={0}
-                    minX={0}
-                    minY={0}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderWidth": 0,
-                        },
-                        {
-                          "flex": 0,
-                          "height": 24,
-                          "width": 24,
-                        },
-                      ]
-                    }
-                    vbHeight={18}
-                    vbWidth={17}
-                    width={24}
-                  >
-                    <RNSVGGroup
-                      fill={null}
-                      propList={
-                        [
-                          "fill",
-                        ]
-                      }
-                    >
-                      <RNSVGPath
-                        clipRule={0}
-                        d="M7.34995 0.200012C6.91436 0.200012 6.51616 0.435415 6.32136 0.808077L5.48921 2.40001H1.59995C0.964824 2.40001 0.449951 2.8925 0.449951 3.50001C0.449951 4.10753 0.964824 4.60001 1.59995 4.60001L1.59995 15.6C1.59995 16.815 2.6297 17.8 3.89995 17.8H13.1C14.3702 17.8 15.4 16.815 15.4 15.6V4.60001C16.0351 4.60001 16.55 4.10753 16.55 3.50001C16.55 2.8925 16.0351 2.40001 15.4 2.40001H11.5107L10.6785 0.808077C10.4837 0.435415 10.0855 0.200012 9.64995 0.200012H7.34995ZM5.04995 6.80001C5.04995 6.1925 5.56482 5.70001 6.19995 5.70001C6.83508 5.70001 7.34995 6.1925 7.34995 6.80001V13.4C7.34995 14.0075 6.83508 14.5 6.19995 14.5C5.56482 14.5 5.04995 14.0075 5.04995 13.4V6.80001ZM10.8 5.70001C10.1648 5.70001 9.64995 6.1925 9.64995 6.80001V13.4C9.64995 14.0075 10.1648 14.5 10.8 14.5C11.4351 14.5 11.95 14.0075 11.95 13.4V6.80001C11.95 6.1925 11.4351 5.70001 10.8 5.70001Z"
-                        fill={
-                          {
-                            "payload": 4294695385,
-                            "type": 0,
-                          }
-                        }
-                        fillRule={0}
-                        propList={
-                          [
-                            "fill",
-                            "fillRule",
-                          ]
-                        }
-                      />
-                    </RNSVGGroup>
-                  </RNSVGSvgView>
-                </View>
-              </View>
-            </View>
-            <View
-              onLayout={[Function]}
-            />
-          </View>
-          <View
-            collapsable={false}
-            handlerTag={10}
-            handlerType="TapGestureHandler"
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            pointerEvents="auto"
-            style={
-              {
-                "transform": [
-                  {
-                    "translateX": -0,
-                  },
-                ],
-              }
-            }
-          >
-            <Text
-              style={
-                [
-                  [
-                    {
-                      "fontFamily": "Montserrat",
-                      "fontSize": 13,
-                      "lineHeight": 20.4,
-                    },
-                  ],
-                  {
-                    "color": "#FFFFFF",
-                    "textAlign": undefined,
-                    "width": "100%",
-                  },
-                  {
-                    "backgroundColor": "#F16868",
-                    "minHeight": 30,
-                    "textAlignVertical": "center",
-                  },
-                ]
-              }
-            >
-              TEST Bubble
-            </Text>
-          </View>
-        </View>
-      </View>
-    </View>
-  </View>
-  <View
-    style={
-      {
-        "alignSelf": "flex-end",
-        "marginBottom": 2,
-      }
-    }
-  >
-    <Text
-      style={
-        [
-          [
-            {
-              "fontFamily": "Montserrat",
-              "fontSize": 13,
-              "lineHeight": 20.4,
-            },
-          ],
-          {
-            "color": "#9AA5B1",
-            "textAlign": "right",
-            "width": "100%",
-          },
-          {
-            "textAlignVertical": "center",
-          },
-        ]
-      }
-    >
-      25 May, 9:08
-    </Text>
-  </View>
-</View>
-`;
-exports[`test text-bubble given the visualState is RECEIVE return a textBubble with left-bottom tip 1`] = `
-<View
-  style={
-    {
-      "gap": 4,
-      "width": "100%",
-    }
-  }
->
-  <View
-    style={
-      {
-        "minWidth": "50%",
-      }
-    }
-  >
-    <View
-      style={
-        {
-          "flexDirection": "row",
-          "gap": 12,
-        }
-      }
-    >
-      <View
-        style={
-          {
-            "justifyContent": "center",
-            "padding": 2,
-          }
-        }
-      >
-        <RNSVGSvgView
-          align="xMidYMid"
-          bbHeight="26"
-          bbWidth="26"
-          fill="none"
-          focusable={false}
-          height={26}
-          meetOrSlice={0}
-          minX={0}
-          minY={0}
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "borderWidth": 0,
-              },
-              {
-                "flex": 0,
-                "height": 26,
-                "width": 26,
-              },
-            ]
-          }
-          vbHeight={23}
-          vbWidth={22}
-          width={26}
-        >
-          <RNSVGGroup
-            fill={null}
-            propList={
-              [
-                "fill",
-              ]
-            }
-          >
-            <RNSVGPath
-              d="M11 7V11.5M11 16H11.0108M20.75 11.5C20.75 17.0919 16.3848 21.625 11 21.625C5.61522 21.625 1.25 17.0919 1.25 11.5C1.25 5.90812 5.61522 1.375 11 1.375C16.3848 1.375 20.75 5.90812 20.75 11.5Z"
-              fill={
-                {
-                  "payload": 4278190080,
-                  "type": 0,
-                }
-              }
-              propList={
-                [
-                  "stroke",
-                  "strokeWidth",
-                  "strokeLinecap",
-                  "strokeLinejoin",
-                ]
-              }
-              stroke={
-                {
-                  "payload": 4294010984,
-                  "type": 0,
-                }
-              }
-              strokeLinecap={1}
-              strokeLinejoin={1}
-              strokeWidth="2"
-            />
-          </RNSVGGroup>
-        </RNSVGSvgView>
-      </View>
-      <View
-        style={
-          {
-            "backgroundColor": "#F16868",
-            "borderBottomLeftRadius": 8,
-            "borderBottomRightRadius": 32,
-            "borderTopLeftRadius": 24,
-            "borderTopRightRadius": 24,
-            "flex": 1,
-            "justifyContent": "center",
-            "paddingBottom": 16,
-            "paddingLeft": 24,
-            "paddingRight": 24,
-            "paddingTop": 16,
-          }
-        }
-      >
-        <View
-          collapsable={false}
-          handlerTag={11}
-          handlerType="PanGestureHandler"
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onLayout={[Function]}
-          style={
-            {
-              "overflow": "hidden",
-            }
-          }
-        >
-          <View
-            collapsable={false}
-            style={
-              {
-                "bottom": 0,
-                "flexDirection": "row-reverse",
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-                "transform": [
-                  {
-                    "translateX": -10000,
-                  },
-                ],
-              }
-            }
-          >
-            <View
-              style={
-                {
-                  "alignItems": "center",
-                  "flex": 1,
-                  "flexDirection": "row",
-                  "justifyContent": "space-evenly",
-                }
-              }
-            >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "alignItems": "center",
-                    "justifyContent": "center",
-                    "opacity": 0,
-                  }
-                }
-              >
-                <View
-                  accessibilityState={
-                    {
-                      "busy": undefined,
-                      "checked": undefined,
-                      "disabled": undefined,
-                      "expanded": undefined,
-                      "selected": undefined,
-                    }
-                  }
-                  accessibilityValue={
-                    {
-                      "max": undefined,
-                      "min": undefined,
-                      "now": undefined,
-                      "text": undefined,
-                    }
-                  }
-                  accessible={true}
-                  collapsable={false}
-                  focusable={true}
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onResponderGrant={[Function]}
-                  onResponderMove={[Function]}
-                  onResponderRelease={[Function]}
-                  onResponderTerminate={[Function]}
-                  onResponderTerminationRequest={[Function]}
-                  onStartShouldSetResponder={[Function]}
-                  testID="refresh-button"
-                >
-                  <RNSVGSvgView
-                    align="xMidYMid"
-                    bbHeight="24"
-                    bbWidth="24"
-                    fill="none"
-                    focusable={false}
-                    height={24}
-                    meetOrSlice={0}
-                    minX={0}
-                    minY={0}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderWidth": 0,
-                        },
-                        {
-                          "flex": 0,
-                          "height": 24,
-                          "width": 24,
-                        },
-                      ]
-                    }
-                    vbHeight={18}
-                    vbWidth={16}
-                    width={24}
-                  >
-                    <RNSVGGroup
-                      fill={null}
-                      propList={
-                        [
-                          "fill",
-                        ]
-                      }
-                    >
-                      <RNSVGPath
-                        d="M1.40005 0.200012C2.00756 0.200012 2.50005 0.692499 2.50005 1.30001V3.61139C3.89715 2.18539 5.84462 1.30001 8.00005 1.30001C11.3544 1.30001 14.2051 3.44426 15.2616 6.43344C15.4641 7.00623 15.1639 7.63468 14.5911 7.83714C14.0183 8.03959 13.3898 7.73937 13.1874 7.16658C12.4318 5.02891 10.3931 3.50001 8.00005 3.50001C6.20162 3.50001 4.60329 4.36353 3.59934 5.70001H6.90005C7.50756 5.70001 8.00005 6.1925 8.00005 6.80001C8.00005 7.40752 7.50756 7.90001 6.90005 7.90001H1.40005C0.792536 7.90001 0.300049 7.40752 0.300049 6.80001V1.30001C0.300049 0.692499 0.792536 0.200012 1.40005 0.200012ZM1.40903 10.1629C1.98182 9.96044 2.61027 10.2607 2.81273 10.8334C3.56828 12.9711 5.60703 14.5 8.00005 14.5C9.79847 14.5 11.3968 13.6365 12.4008 12.3L9.10005 12.3C8.49254 12.3 8.00005 11.8075 8.00005 11.2C8.00005 10.5925 8.49254 10.1 9.10005 10.1H14.6C14.8918 10.1 15.1716 10.2159 15.3779 10.4222C15.5842 10.6285 15.7 10.9083 15.7 11.2V16.7C15.7 17.3075 15.2076 17.8 14.6 17.8C13.9925 17.8 13.5 17.3075 13.5 16.7V14.3886C12.1029 15.8146 10.1555 16.7 8.00005 16.7C4.6457 16.7 1.795 14.5558 0.738478 11.5666C0.536026 10.9938 0.836243 10.3653 1.40903 10.1629Z"
-                        fill={
-                          {
-                            "payload": 4294695385,
-                            "type": 0,
-                          }
-                        }
-                        propList={
-                          [
-                            "fill",
-                          ]
-                        }
-                      />
-                    </RNSVGGroup>
-                  </RNSVGSvgView>
-                </View>
-              </View>
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "alignItems": "center",
-                    "justifyContent": "center",
-                    "opacity": 0,
-                  }
-                }
-              >
-                <View
-                  accessibilityState={
-                    {
-                      "busy": undefined,
-                      "checked": undefined,
-                      "disabled": undefined,
-                      "expanded": undefined,
-                      "selected": undefined,
-                    }
-                  }
-                  accessibilityValue={
-                    {
-                      "max": undefined,
-                      "min": undefined,
-                      "now": undefined,
-                      "text": undefined,
-                    }
-                  }
-                  accessible={true}
-                  collapsable={false}
-                  focusable={true}
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onResponderGrant={[Function]}
-                  onResponderMove={[Function]}
-                  onResponderRelease={[Function]}
-                  onResponderTerminate={[Function]}
-                  onResponderTerminationRequest={[Function]}
-                  onStartShouldSetResponder={[Function]}
-                  testID="delete-button"
-                >
-                  <RNSVGSvgView
-                    align="xMidYMid"
-                    bbHeight="24"
-                    bbWidth="24"
-                    fill="none"
-                    focusable={false}
-                    height={24}
-                    meetOrSlice={0}
-                    minX={0}
-                    minY={0}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderWidth": 0,
-                        },
-                        {
-                          "flex": 0,
-                          "height": 24,
-                          "width": 24,
-                        },
-                      ]
-                    }
-                    vbHeight={18}
-                    vbWidth={17}
-                    width={24}
-                  >
-                    <RNSVGGroup
-                      fill={null}
-                      propList={
-                        [
-                          "fill",
-                        ]
-                      }
-                    >
-                      <RNSVGPath
-                        clipRule={0}
-                        d="M7.34995 0.200012C6.91436 0.200012 6.51616 0.435415 6.32136 0.808077L5.48921 2.40001H1.59995C0.964824 2.40001 0.449951 2.8925 0.449951 3.50001C0.449951 4.10753 0.964824 4.60001 1.59995 4.60001L1.59995 15.6C1.59995 16.815 2.6297 17.8 3.89995 17.8H13.1C14.3702 17.8 15.4 16.815 15.4 15.6V4.60001C16.0351 4.60001 16.55 4.10753 16.55 3.50001C16.55 2.8925 16.0351 2.40001 15.4 2.40001H11.5107L10.6785 0.808077C10.4837 0.435415 10.0855 0.200012 9.64995 0.200012H7.34995ZM5.04995 6.80001C5.04995 6.1925 5.56482 5.70001 6.19995 5.70001C6.83508 5.70001 7.34995 6.1925 7.34995 6.80001V13.4C7.34995 14.0075 6.83508 14.5 6.19995 14.5C5.56482 14.5 5.04995 14.0075 5.04995 13.4V6.80001ZM10.8 5.70001C10.1648 5.70001 9.64995 6.1925 9.64995 6.80001V13.4C9.64995 14.0075 10.1648 14.5 10.8 14.5C11.4351 14.5 11.95 14.0075 11.95 13.4V6.80001C11.95 6.1925 11.4351 5.70001 10.8 5.70001Z"
-                        fill={
-                          {
-                            "payload": 4294695385,
-                            "type": 0,
-                          }
-                        }
-                        fillRule={0}
-                        propList={
-                          [
-                            "fill",
-                            "fillRule",
-                          ]
-                        }
-                      />
-                    </RNSVGGroup>
-                  </RNSVGSvgView>
-                </View>
-              </View>
-            </View>
-            <View
-              onLayout={[Function]}
-            />
-          </View>
-          <View
-            collapsable={false}
-            handlerTag={12}
-            handlerType="TapGestureHandler"
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            pointerEvents="auto"
-            style={
-              {
-                "transform": [
-                  {
-                    "translateX": -0,
-                  },
-                ],
-              }
-            }
-          >
-            <Text
-              style={
-                [
-                  [
-                    {
-                      "fontFamily": "Montserrat",
-                      "fontSize": 13,
-                      "lineHeight": 20.4,
-                    },
-                  ],
-                  {
-                    "color": "#FFFFFF",
-                    "textAlign": undefined,
-                    "width": "100%",
-                  },
-                  {
-                    "backgroundColor": "#F16868",
-                    "minHeight": 30,
-                    "textAlignVertical": "center",
-                  },
-                ]
-              }
-            >
-              TEST Bubble
-            </Text>
-          </View>
-        </View>
-      </View>
-    </View>
-  </View>
-  <View
-    style={
-      {
-        "alignSelf": "flex-end",
-        "marginBottom": 2,
-      }
-    }
-  >
-    <Text
-      style={
-        [
-          [
-            {
-              "fontFamily": "Montserrat",
-              "fontSize": 13,
-              "lineHeight": 20.4,
-            },
-          ],
-          {
-            "color": "#9AA5B1",
-            "textAlign": "right",
-            "width": "100%",
-          },
-          {
-            "textAlignVertical": "center",
-          },
-        ]
-      }
-    >
-      25 May, 9:08
-    </Text>
-  </View>
-</View>
-`;
-exports[`test text-bubble given the visualState is WARNING return an orange colored text-bubble AND white text 1`] = `
-<View
-  style={
-    {
-      "gap": 4,
-      "width": "100%",
-    }
-  }
->
-  <View
-    style={
-      {
-        "minWidth": "50%",
-      }
-    }
-  >
-    <View
-      style={
-        {
-          "flexDirection": "row",
-          "gap": 12,
-        }
-      }
-    >
-      <View
-        style={
-          {
-            "justifyContent": "center",
-            "padding": 2,
-          }
-        }
-      >
-        <RNSVGSvgView
-          align="xMidYMid"
-          bbHeight="26"
-          bbWidth="26"
-          fill="none"
-          focusable={false}
-          height={26}
-          meetOrSlice={0}
-          minX={0}
-          minY={0}
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "borderWidth": 0,
-              },
-              {
-                "flex": 0,
-                "height": 26,
-                "width": 26,
-              },
-            ]
-          }
-          vbHeight={23}
-          vbWidth={22}
-          width={26}
-        >
-          <RNSVGGroup
-            fill={null}
-            propList={
-              [
-                "fill",
-              ]
-            }
-          >
-            <RNSVGPath
-              d="M11 7V11.5M11 16H11.0108M20.75 11.5C20.75 17.0919 16.3848 21.625 11 21.625C5.61522 21.625 1.25 17.0919 1.25 11.5C1.25 5.90812 5.61522 1.375 11 1.375C16.3848 1.375 20.75 5.90812 20.75 11.5Z"
-              fill={
-                {
-                  "payload": 4278190080,
-                  "type": 0,
-                }
-              }
-              propList={
-                [
-                  "stroke",
-                  "strokeWidth",
-                  "strokeLinecap",
-                  "strokeLinejoin",
-                ]
-              }
-              stroke={
-                {
-                  "payload": 4294010984,
-                  "type": 0,
-                }
-              }
-              strokeLinecap={1}
-              strokeLinejoin={1}
-              strokeWidth="2"
-            />
-          </RNSVGGroup>
-        </RNSVGSvgView>
-      </View>
-      <View
-        style={
-          {
-            "backgroundColor": "#F16868",
-            "borderBottomLeftRadius": 8,
-            "borderBottomRightRadius": 32,
-            "borderTopLeftRadius": 24,
-            "borderTopRightRadius": 24,
-            "flex": 1,
-            "justifyContent": "center",
-            "paddingBottom": 16,
-            "paddingLeft": 24,
-            "paddingRight": 24,
-            "paddingTop": 16,
-          }
-        }
-      >
-        <View
-          collapsable={false}
-          handlerTag={3}
-          handlerType="PanGestureHandler"
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onLayout={[Function]}
-          style={
-            {
-              "overflow": "hidden",
-            }
-          }
-        >
-          <View
-            collapsable={false}
-            style={
-              {
-                "bottom": 0,
-                "flexDirection": "row-reverse",
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-                "transform": [
-                  {
-                    "translateX": -10000,
-                  },
-                ],
-              }
-            }
-          >
-            <View
-              style={
-                {
-                  "alignItems": "center",
-                  "flex": 1,
-                  "flexDirection": "row",
-                  "justifyContent": "space-evenly",
-                }
-              }
-            >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "alignItems": "center",
-                    "justifyContent": "center",
-                    "opacity": 0,
-                  }
-                }
-              >
-                <View
-                  accessibilityState={
-                    {
-                      "busy": undefined,
-                      "checked": undefined,
-                      "disabled": undefined,
-                      "expanded": undefined,
-                      "selected": undefined,
-                    }
-                  }
-                  accessibilityValue={
-                    {
-                      "max": undefined,
-                      "min": undefined,
-                      "now": undefined,
-                      "text": undefined,
-                    }
-                  }
-                  accessible={true}
-                  collapsable={false}
-                  focusable={true}
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onResponderGrant={[Function]}
-                  onResponderMove={[Function]}
-                  onResponderRelease={[Function]}
-                  onResponderTerminate={[Function]}
-                  onResponderTerminationRequest={[Function]}
-                  onStartShouldSetResponder={[Function]}
-                  testID="refresh-button"
-                >
-                  <RNSVGSvgView
-                    align="xMidYMid"
-                    bbHeight="24"
-                    bbWidth="24"
-                    fill="none"
-                    focusable={false}
-                    height={24}
-                    meetOrSlice={0}
-                    minX={0}
-                    minY={0}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderWidth": 0,
-                        },
-                        {
-                          "flex": 0,
-                          "height": 24,
-                          "width": 24,
-                        },
-                      ]
-                    }
-                    vbHeight={18}
-                    vbWidth={16}
-                    width={24}
-                  >
-                    <RNSVGGroup
-                      fill={null}
-                      propList={
-                        [
-                          "fill",
-                        ]
-                      }
-                    >
-                      <RNSVGPath
-                        d="M1.40005 0.200012C2.00756 0.200012 2.50005 0.692499 2.50005 1.30001V3.61139C3.89715 2.18539 5.84462 1.30001 8.00005 1.30001C11.3544 1.30001 14.2051 3.44426 15.2616 6.43344C15.4641 7.00623 15.1639 7.63468 14.5911 7.83714C14.0183 8.03959 13.3898 7.73937 13.1874 7.16658C12.4318 5.02891 10.3931 3.50001 8.00005 3.50001C6.20162 3.50001 4.60329 4.36353 3.59934 5.70001H6.90005C7.50756 5.70001 8.00005 6.1925 8.00005 6.80001C8.00005 7.40752 7.50756 7.90001 6.90005 7.90001H1.40005C0.792536 7.90001 0.300049 7.40752 0.300049 6.80001V1.30001C0.300049 0.692499 0.792536 0.200012 1.40005 0.200012ZM1.40903 10.1629C1.98182 9.96044 2.61027 10.2607 2.81273 10.8334C3.56828 12.9711 5.60703 14.5 8.00005 14.5C9.79847 14.5 11.3968 13.6365 12.4008 12.3L9.10005 12.3C8.49254 12.3 8.00005 11.8075 8.00005 11.2C8.00005 10.5925 8.49254 10.1 9.10005 10.1H14.6C14.8918 10.1 15.1716 10.2159 15.3779 10.4222C15.5842 10.6285 15.7 10.9083 15.7 11.2V16.7C15.7 17.3075 15.2076 17.8 14.6 17.8C13.9925 17.8 13.5 17.3075 13.5 16.7V14.3886C12.1029 15.8146 10.1555 16.7 8.00005 16.7C4.6457 16.7 1.795 14.5558 0.738478 11.5666C0.536026 10.9938 0.836243 10.3653 1.40903 10.1629Z"
-                        fill={
-                          {
-                            "payload": 4294695385,
-                            "type": 0,
-                          }
-                        }
-                        propList={
-                          [
-                            "fill",
-                          ]
-                        }
-                      />
-                    </RNSVGGroup>
-                  </RNSVGSvgView>
-                </View>
-              </View>
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "alignItems": "center",
-                    "justifyContent": "center",
-                    "opacity": 0,
-                  }
-                }
-              >
-                <View
-                  accessibilityState={
-                    {
-                      "busy": undefined,
-                      "checked": undefined,
-                      "disabled": undefined,
-                      "expanded": undefined,
-                      "selected": undefined,
-                    }
-                  }
-                  accessibilityValue={
-                    {
-                      "max": undefined,
-                      "min": undefined,
-                      "now": undefined,
-                      "text": undefined,
-                    }
-                  }
-                  accessible={true}
-                  collapsable={false}
-                  focusable={true}
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onResponderGrant={[Function]}
-                  onResponderMove={[Function]}
-                  onResponderRelease={[Function]}
-                  onResponderTerminate={[Function]}
-                  onResponderTerminationRequest={[Function]}
-                  onStartShouldSetResponder={[Function]}
-                  testID="delete-button"
-                >
-                  <RNSVGSvgView
-                    align="xMidYMid"
-                    bbHeight="24"
-                    bbWidth="24"
-                    fill="none"
-                    focusable={false}
-                    height={24}
-                    meetOrSlice={0}
-                    minX={0}
-                    minY={0}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderWidth": 0,
-                        },
-                        {
-                          "flex": 0,
-                          "height": 24,
-                          "width": 24,
-                        },
-                      ]
-                    }
-                    vbHeight={18}
-                    vbWidth={17}
-                    width={24}
-                  >
-                    <RNSVGGroup
-                      fill={null}
-                      propList={
-                        [
-                          "fill",
-                        ]
-                      }
-                    >
-                      <RNSVGPath
-                        clipRule={0}
-                        d="M7.34995 0.200012C6.91436 0.200012 6.51616 0.435415 6.32136 0.808077L5.48921 2.40001H1.59995C0.964824 2.40001 0.449951 2.8925 0.449951 3.50001C0.449951 4.10753 0.964824 4.60001 1.59995 4.60001L1.59995 15.6C1.59995 16.815 2.6297 17.8 3.89995 17.8H13.1C14.3702 17.8 15.4 16.815 15.4 15.6V4.60001C16.0351 4.60001 16.55 4.10753 16.55 3.50001C16.55 2.8925 16.0351 2.40001 15.4 2.40001H11.5107L10.6785 0.808077C10.4837 0.435415 10.0855 0.200012 9.64995 0.200012H7.34995ZM5.04995 6.80001C5.04995 6.1925 5.56482 5.70001 6.19995 5.70001C6.83508 5.70001 7.34995 6.1925 7.34995 6.80001V13.4C7.34995 14.0075 6.83508 14.5 6.19995 14.5C5.56482 14.5 5.04995 14.0075 5.04995 13.4V6.80001ZM10.8 5.70001C10.1648 5.70001 9.64995 6.1925 9.64995 6.80001V13.4C9.64995 14.0075 10.1648 14.5 10.8 14.5C11.4351 14.5 11.95 14.0075 11.95 13.4V6.80001C11.95 6.1925 11.4351 5.70001 10.8 5.70001Z"
-                        fill={
-                          {
-                            "payload": 4294695385,
-                            "type": 0,
-                          }
-                        }
-                        fillRule={0}
-                        propList={
-                          [
-                            "fill",
-                            "fillRule",
-                          ]
-                        }
-                      />
-                    </RNSVGGroup>
-                  </RNSVGSvgView>
-                </View>
-              </View>
-            </View>
-            <View
-              onLayout={[Function]}
-            />
-          </View>
-          <View
-            collapsable={false}
-            handlerTag={4}
-            handlerType="TapGestureHandler"
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            pointerEvents="auto"
-            style={
-              {
-                "transform": [
-                  {
-                    "translateX": -0,
-                  },
-                ],
-              }
-            }
-          >
-            <Text
-              style={
-                [
-                  [
-                    {
-                      "fontFamily": "Montserrat",
-                      "fontSize": 13,
-                      "lineHeight": 20.4,
-                    },
-                  ],
-                  {
-                    "color": "#FFFFFF",
-                    "textAlign": undefined,
-                    "width": "100%",
-                  },
-                  {
-                    "backgroundColor": "#F16868",
-                    "minHeight": 30,
-                    "textAlignVertical": "center",
-                  },
-                ]
-              }
-            >
-              TEST color
-            </Text>
-          </View>
-        </View>
-      </View>
-    </View>
-  </View>
-  <View
-    style={
-      {
-        "alignSelf": "flex-end",
-        "marginBottom": 2,
-      }
-    }
-  >
-    <Text
-      style={
-        [
-          [
-            {
-              "fontFamily": "Montserrat",
-              "fontSize": 13,
-              "lineHeight": 20.4,
-            },
-          ],
-          {
-            "color": "#9AA5B1",
-            "textAlign": "right",
-            "width": "100%",
-          },
-          {
-            "textAlignVertical": "center",
-          },
-        ]
-      }
-    >
-      25 May, 9:08
-    </Text>
-  </View>
-</View>
-`;
-exports[`test text-bubble return a text bubble, that will be send, but does not get send due to an error. It will show the failed text bubble 1`] = `
-<View
-  style={
-    {
-      "gap": 4,
-      "width": "100%",
-    }
-  }
->
-  <View
-    style={
-      {
-        "minWidth": "50%",
-      }
-    }
-  >
-    <View
-      style={
-        {
-          "flexDirection": "row",
-          "gap": 12,
-        }
-      }
-    >
-      <View
-        style={
-          {
-            "justifyContent": "center",
-            "padding": 2,
-          }
-        }
-      >
-        <RNSVGSvgView
-          align="xMidYMid"
-          bbHeight="26"
-          bbWidth="26"
-          fill="none"
-          focusable={false}
-          height={26}
-          meetOrSlice={0}
-          minX={0}
-          minY={0}
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "borderWidth": 0,
-              },
-              {
-                "flex": 0,
-                "height": 26,
-                "width": 26,
-              },
-            ]
-          }
-          vbHeight={23}
-          vbWidth={22}
-          width={26}
-        >
-          <RNSVGGroup
-            fill={null}
-            propList={
-              [
-                "fill",
-              ]
-            }
-          >
-            <RNSVGPath
-              d="M11 7V11.5M11 16H11.0108M20.75 11.5C20.75 17.0919 16.3848 21.625 11 21.625C5.61522 21.625 1.25 17.0919 1.25 11.5C1.25 5.90812 5.61522 1.375 11 1.375C16.3848 1.375 20.75 5.90812 20.75 11.5Z"
-              fill={
-                {
-                  "payload": 4278190080,
-                  "type": 0,
-                }
-              }
-              propList={
-                [
-                  "stroke",
-                  "strokeWidth",
-                  "strokeLinecap",
-                  "strokeLinejoin",
-                ]
-              }
-              stroke={
-                {
-                  "payload": 4294010984,
-                  "type": 0,
-                }
-              }
-              strokeLinecap={1}
-              strokeLinejoin={1}
-              strokeWidth="2"
-            />
-          </RNSVGGroup>
-        </RNSVGSvgView>
-      </View>
-      <View
-        style={
-          {
-            "backgroundColor": "#F16868",
-            "borderBottomLeftRadius": 8,
-            "borderBottomRightRadius": 32,
-            "borderTopLeftRadius": 24,
-            "borderTopRightRadius": 24,
-            "flex": 1,
-            "justifyContent": "center",
-            "paddingBottom": 16,
-            "paddingLeft": 24,
-            "paddingRight": 24,
-            "paddingTop": 16,
-          }
-        }
-      >
-        <View
-          collapsable={false}
-          handlerTag={13}
-          handlerType="PanGestureHandler"
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onLayout={[Function]}
-          style={
-            {
-              "overflow": "hidden",
-            }
-          }
-        >
-          <View
-            collapsable={false}
-            style={
-              {
-                "bottom": 0,
-                "flexDirection": "row-reverse",
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-                "transform": [
-                  {
-                    "translateX": -10000,
-                  },
-                ],
-              }
-            }
-          >
-            <View
-              style={
-                {
-                  "alignItems": "center",
-                  "flex": 1,
-                  "flexDirection": "row",
-                  "justifyContent": "space-evenly",
-                }
-              }
-            >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "alignItems": "center",
-                    "justifyContent": "center",
-                    "opacity": 0,
-                  }
-                }
-              >
-                <View
-                  accessibilityState={
-                    {
-                      "busy": undefined,
-                      "checked": undefined,
-                      "disabled": undefined,
-                      "expanded": undefined,
-                      "selected": undefined,
-                    }
-                  }
-                  accessibilityValue={
-                    {
-                      "max": undefined,
-                      "min": undefined,
-                      "now": undefined,
-                      "text": undefined,
-                    }
-                  }
-                  accessible={true}
-                  collapsable={false}
-                  focusable={true}
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onResponderGrant={[Function]}
-                  onResponderMove={[Function]}
-                  onResponderRelease={[Function]}
-                  onResponderTerminate={[Function]}
-                  onResponderTerminationRequest={[Function]}
-                  onStartShouldSetResponder={[Function]}
-                  testID="refresh-button"
-                >
-                  <RNSVGSvgView
-                    align="xMidYMid"
-                    bbHeight="24"
-                    bbWidth="24"
-                    fill="none"
-                    focusable={false}
-                    height={24}
-                    meetOrSlice={0}
-                    minX={0}
-                    minY={0}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderWidth": 0,
-                        },
-                        {
-                          "flex": 0,
-                          "height": 24,
-                          "width": 24,
-                        },
-                      ]
-                    }
-                    vbHeight={18}
-                    vbWidth={16}
-                    width={24}
-                  >
-                    <RNSVGGroup
-                      fill={null}
-                      propList={
-                        [
-                          "fill",
-                        ]
-                      }
-                    >
-                      <RNSVGPath
-                        d="M1.40005 0.200012C2.00756 0.200012 2.50005 0.692499 2.50005 1.30001V3.61139C3.89715 2.18539 5.84462 1.30001 8.00005 1.30001C11.3544 1.30001 14.2051 3.44426 15.2616 6.43344C15.4641 7.00623 15.1639 7.63468 14.5911 7.83714C14.0183 8.03959 13.3898 7.73937 13.1874 7.16658C12.4318 5.02891 10.3931 3.50001 8.00005 3.50001C6.20162 3.50001 4.60329 4.36353 3.59934 5.70001H6.90005C7.50756 5.70001 8.00005 6.1925 8.00005 6.80001C8.00005 7.40752 7.50756 7.90001 6.90005 7.90001H1.40005C0.792536 7.90001 0.300049 7.40752 0.300049 6.80001V1.30001C0.300049 0.692499 0.792536 0.200012 1.40005 0.200012ZM1.40903 10.1629C1.98182 9.96044 2.61027 10.2607 2.81273 10.8334C3.56828 12.9711 5.60703 14.5 8.00005 14.5C9.79847 14.5 11.3968 13.6365 12.4008 12.3L9.10005 12.3C8.49254 12.3 8.00005 11.8075 8.00005 11.2C8.00005 10.5925 8.49254 10.1 9.10005 10.1H14.6C14.8918 10.1 15.1716 10.2159 15.3779 10.4222C15.5842 10.6285 15.7 10.9083 15.7 11.2V16.7C15.7 17.3075 15.2076 17.8 14.6 17.8C13.9925 17.8 13.5 17.3075 13.5 16.7V14.3886C12.1029 15.8146 10.1555 16.7 8.00005 16.7C4.6457 16.7 1.795 14.5558 0.738478 11.5666C0.536026 10.9938 0.836243 10.3653 1.40903 10.1629Z"
-                        fill={
-                          {
-                            "payload": 4294695385,
-                            "type": 0,
-                          }
-                        }
-                        propList={
-                          [
-                            "fill",
-                          ]
-                        }
-                      />
-                    </RNSVGGroup>
-                  </RNSVGSvgView>
-                </View>
-              </View>
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "alignItems": "center",
-                    "justifyContent": "center",
-                    "opacity": 0,
-                  }
-                }
-              >
-                <View
-                  accessibilityState={
-                    {
-                      "busy": undefined,
-                      "checked": undefined,
-                      "disabled": undefined,
-                      "expanded": undefined,
-                      "selected": undefined,
-                    }
-                  }
-                  accessibilityValue={
-                    {
-                      "max": undefined,
-                      "min": undefined,
-                      "now": undefined,
-                      "text": undefined,
-                    }
-                  }
-                  accessible={true}
-                  collapsable={false}
-                  focusable={true}
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onResponderGrant={[Function]}
-                  onResponderMove={[Function]}
-                  onResponderRelease={[Function]}
-                  onResponderTerminate={[Function]}
-                  onResponderTerminationRequest={[Function]}
-                  onStartShouldSetResponder={[Function]}
-                  testID="delete-button"
-                >
-                  <RNSVGSvgView
-                    align="xMidYMid"
-                    bbHeight="24"
-                    bbWidth="24"
-                    fill="none"
-                    focusable={false}
-                    height={24}
-                    meetOrSlice={0}
-                    minX={0}
-                    minY={0}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderWidth": 0,
-                        },
-                        {
-                          "flex": 0,
-                          "height": 24,
-                          "width": 24,
-                        },
-                      ]
-                    }
-                    vbHeight={18}
-                    vbWidth={17}
-                    width={24}
-                  >
-                    <RNSVGGroup
-                      fill={null}
-                      propList={
-                        [
-                          "fill",
-                        ]
-                      }
-                    >
-                      <RNSVGPath
-                        clipRule={0}
-                        d="M7.34995 0.200012C6.91436 0.200012 6.51616 0.435415 6.32136 0.808077L5.48921 2.40001H1.59995C0.964824 2.40001 0.449951 2.8925 0.449951 3.50001C0.449951 4.10753 0.964824 4.60001 1.59995 4.60001L1.59995 15.6C1.59995 16.815 2.6297 17.8 3.89995 17.8H13.1C14.3702 17.8 15.4 16.815 15.4 15.6V4.60001C16.0351 4.60001 16.55 4.10753 16.55 3.50001C16.55 2.8925 16.0351 2.40001 15.4 2.40001H11.5107L10.6785 0.808077C10.4837 0.435415 10.0855 0.200012 9.64995 0.200012H7.34995ZM5.04995 6.80001C5.04995 6.1925 5.56482 5.70001 6.19995 5.70001C6.83508 5.70001 7.34995 6.1925 7.34995 6.80001V13.4C7.34995 14.0075 6.83508 14.5 6.19995 14.5C5.56482 14.5 5.04995 14.0075 5.04995 13.4V6.80001ZM10.8 5.70001C10.1648 5.70001 9.64995 6.1925 9.64995 6.80001V13.4C9.64995 14.0075 10.1648 14.5 10.8 14.5C11.4351 14.5 11.95 14.0075 11.95 13.4V6.80001C11.95 6.1925 11.4351 5.70001 10.8 5.70001Z"
-                        fill={
-                          {
-                            "payload": 4294695385,
-                            "type": 0,
-                          }
-                        }
-                        fillRule={0}
-                        propList={
-                          [
-                            "fill",
-                            "fillRule",
-                          ]
-                        }
-                      />
-                    </RNSVGGroup>
-                  </RNSVGSvgView>
-                </View>
-              </View>
-            </View>
-            <View
-              onLayout={[Function]}
-            />
-          </View>
-          <View
-            collapsable={false}
-            handlerTag={14}
-            handlerType="TapGestureHandler"
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            pointerEvents="auto"
-            style={
-              {
-                "transform": [
-                  {
-                    "translateX": -0,
-                  },
-                ],
-              }
-            }
-          >
-            <Text
-              style={
-                [
-                  [
-                    {
-                      "fontFamily": "Montserrat",
-                      "fontSize": 13,
-                      "lineHeight": 20.4,
-                    },
-                  ],
-                  {
-                    "color": "#FFFFFF",
-                    "textAlign": undefined,
-                    "width": "100%",
-                  },
-                  {
-                    "backgroundColor": "#F16868",
-                    "minHeight": 30,
-                    "textAlignVertical": "center",
-                  },
-                ]
-              }
-            >
-              TEST Bubble
-            </Text>
-          </View>
-        </View>
-      </View>
-    </View>
-  </View>
-  <View
-    style={
-      {
-        "alignSelf": "flex-end",
-        "marginBottom": 2,
-      }
-    }
-  >
-    <Text
-      style={
-        [
-          [
-            {
-              "fontFamily": "Montserrat",
-              "fontSize": 13,
-              "lineHeight": 20.4,
-            },
-          ],
-          {
-            "color": "#9AA5B1",
-            "textAlign": "right",
-            "width": "100%",
-          },
-          {
-            "textAlignVertical": "center",
-          },
-        ]
-      }
-    >
-      25 May, 9:08
-    </Text>
-  </View>
-</View>
-`;